实现懒加载(重在掌握原理)

正常我们看到图片显示看到一个替代图，鼠标滚动经过时，会显示真正的图片，就相当于真正的图片等到滚动到该区域等了一会才真正加载出来

原理：

那如果当前图片距离顶部的高度小于当前视口加上滚动距离的高度的时候，那么这个图片就显示出来如图

那么我们需要知道几个参数并且需要结合定时器

1.当前图片距离顶部的高度 offsetTop
2.滚动距离 document.documentElement.scrollTop
3.视口高度 document.documentElement.clientHeight;

  1. setTimeout();

奉上代码
html部分

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  4. <head>
  5.     <meta charset="UTF-8" />
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  8.     <title>图片懒加载案例</title>
  9.     <style>
  10.         .container {
  11.             width: 500px;
  12.             display: grid;
  13.             gap: 10px;
  14.             grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  15.         }
  17.         .container img {
  18.             width: 100%;
  19.         }
  20.     </style>
  21. </head>
  23. <body>
  24.     <div class="container">
  25.         <img src="images2/temp.jpg" alt="" data-src="images2/img-1.jpg" />
  26.         <img src="images2/temp.jpg" alt="" data-src="images2/img-2.jpg" />
  27.         <img src="images2/temp.jpg" alt="" data-src="images2/img-3.jpg" />
  28.         <img src="images2/temp.jpg" alt="" data-src="images2/img-4.jpg" />
  29.         <img src="images2/temp.jpg" alt="" data-src="images2/img-5.jpg" />
  30.         <img src="images2/temp.jpg" alt="" data-src="images2/img-6.jpg" />
  31.         <img src="images2/temp.jpg" alt="" data-src="images2/img-7.jpg" />
  32.         <img src="images2/temp.jpg" alt="" data-src="images2/img-8.jpg" />
  33.         <img src="images2/temp.jpg" alt="" data-src="images2/img-9.jpg" />
  34.         <img src="images2/temp.jpg" alt="" data-src="images2/img-10.jpg" />
  35.         <img src="images2/temp.jpg" alt="" data-src="images2/img-11.jpg" />
  36.         <img src="images2/temp.jpg" alt="" data-src="images2/img-12.jpg" />
  37.         <img src="images2/temp.jpg" alt="" data-src="images2/img-13.jpg" />
  38.         <img src="images2/temp.jpg" alt="" data-src="images2/img-14.jpg" />
  39.         <img src="images2/temp.jpg" alt="" data-src="images2/img-15.jpg" />
  40.         <img src="images2/temp.jpg" alt="" data-src="images2/img-16.jpg" />
  41.         <img src="images2/temp.jpg" alt="" data-src="images2/img-17.jpg" />
  42.         <img src="images2/temp.jpg" alt="" data-src="images2/img-18.jpg" />
  43.         <img src="images2/temp.jpg" alt="" data-src="images2/img-19.jpg" />
  44.         <img src="images2/temp.jpg" alt="" data-src="images2/img-20.jpg" />
  45.         <img src="images2/temp.jpg" alt="" data-src="images2/img-21.jpg" />
  46.         <img src="images2/temp.jpg" alt="" data-src="images2/img-22.jpg" />
  47.         <img src="images2/temp.jpg" alt="" data-src="images2/img-23.jpg" />
  48.         <img src="images2/temp.jpg" alt="" data-src="images2/img-24.jpg" />
  49.         <img src="images2/temp.jpg" alt="" data-src="images2/img-25.jpg" />
  50.         <img src="images2/temp.jpg" alt="" data-src="images2/img-26.jpg" />
  51.         <img src="images2/temp.jpg" alt="" data-src="images2/img-27.jpg" />
  52.         <img src="images2/temp.jpg" alt="" data-src="images2/img-28.jpg" />
  53.         <img src="images2/temp.jpg" alt="" data-src="images2/img-29.jpg" />
  54.         <img src="images2/temp.jpg" alt="" data-src="images2/img-30.jpg" />
  55.         <img src="images2/temp.jpg" alt="" data-src="images2/img-31.jpg" />
  56.         <img src="images2/temp.jpg" alt="" data-src="images2/img-32.jpg" />
  57.         <img src="images2/temp.jpg" alt="" data-src="images2/img-33.jpg" />
  58.         <img src="images2/temp.jpg" alt="" data-src="images2/img-34.jpg" />
  59.         <img src="images2/temp.jpg" alt="" data-src="images2/img-35.jpg" />
  60.         <img src="images2/temp.jpg" alt="" data-src="images2/img-36.jpg" />
  61.         <img src="images2/temp.jpg" alt="" data-src="images2/img-37.jpg" />
  62.         <img src="images2/temp.jpg" alt="" data-src="images2/img-38.jpg" />
  63.         <img src="images2/temp.jpg" alt="" data-src="images2/img-39.jpg" />
  64.         <img src="images2/temp.jpg" alt="" data-src="images2/img-40.jpg" />
  65.         <img src="images2/temp.jpg" alt="" data-src="images2/img-41.jpg" />
  66.         <img src="images2/temp.jpg" alt="" data-src="images2/img-42.jpg" />
  67.         <img src="images2/temp.jpg" alt="" data-src="images2/img-43.jpg" />
  68.         <img src="images2/temp.jpg" alt="" data-src="images2/img-44.jpg" />
  69.         <img src="images2/temp.jpg" alt="" data-src="images2/img-45.jpg" />
  70.         <img src="images2/temp.jpg" alt="" data-src="images2/img-46.jpg" />
  71.         <img src="images2/temp.jpg" alt="" data-src="images2/img-47.jpg" />
  72.         <img src="images2/temp.jpg" alt="" data-src="images2/img-48.jpg" />
  73.         <img src="images2/temp.jpg" alt="" data-src="images2/img-49.jpg" />
  74.         <img src="images2/temp.jpg" alt="" data-src="images2/img-50.jpg" />
  75.         <img src="images2/temp.jpg" alt="" data-src="images2/img-51.jpg" />
  76.         <img src="images2/temp.jpg" alt="" data-src="images2/img-52.jpg" />
  77.         <img src="images2/temp.jpg" alt="" data-src="images2/img-53.jpg" />
  78.         <img src="images2/temp.jpg" alt="" data-src="images2/img-54.jpg" />
  79.         <img src="images2/temp.jpg" alt="" data-src="images2/img-55.jpg" />
  80.         <img src="images2/temp.jpg" alt="" data-src="images2/img-56.jpg" />
  81.         <img src="images2/temp.jpg" alt="" data-src="images2/img-57.jpg" />
  82.         <img src="images2/temp.jpg" alt="" data-src="images2/img-58.jpg" />
  83.         <img src="images2/temp.jpg" alt="" data-src="images2/img-59.jpg" />
  84.         <img src="images2/temp.jpg" alt="" data-src="images2/img-60.jpg" />
  85.         <img src="images2/temp.jpg" alt="" data-src="images2/img-61.jpg" />
  86.         <img src="images2/temp.jpg" alt="" data-src="images2/img-62.jpg" />
  87.         <img src="images2/temp.jpg" alt="" data-src="images2/img-63.jpg" />
  88.         <img src="images2/temp.jpg" alt="" data-src="images2/img-64.jpg" />
  89.         <img src="images2/temp.jpg" alt="" data-src="images2/img-65.jpg" />
  90.         <img src="images2/temp.jpg" alt="" data-src="images2/img-66.jpg" />
  91.         <img src="images2/temp.jpg" alt="" data-src="images2/img-67.jpg" />
  92.         <img src="images2/temp.jpg" alt="" data-src="images2/img-68.jpg" />
  93.         <img src="images2/temp.jpg" alt="" data-src="images2/img-69.jpg" />
  94.         <img src="images2/temp.jpg" alt="" data-src="images2/img-70.jpg" />
  95.     </div>
  97. </body>
  99. </html>

js部分

  1.  const imgs = document.querySelectorAll('.container img');
  2.         // const imgs = document.images;
  3.         console.log(imgs);
  4.         //视口高度
  5.         const clientHeight = document.documentElement.clientHeight;
  6.         // 监听滚动事件
  7.         window.addEventListener("scroll", lazyload);
  8.         // 当加载好页面的时候，不能都显示替代的图片，所以可以调用一次，加载几张
  9.         window.onload = function () {
  10.             lazyload();
  11.         }
  12.         function lazyload() {
  13.             imgs.forEach((img) => {
  14.                 // 那如果当前图片距离顶部的高度小于当前视口加上滚动距离的高度的时候，
  15.                 // 那么这个图片就显示出来
  16.                 // 当前图片距离顶部的高度 offsetTop
  17.                 // 滚动距离 scrollTop
  18.                 // 视口高度 document.documentElement.clientHeight;
  19.                 // 也就是说
  20.                 if (img.offsetTop < clientHeight + document.documentElement.scrollTop) {
  21.                     setTimeout(function () {
  22.                         img.src = img.dataset.src;
  23.                     }, 500);
  24.                 }
  25.             });
  26.         }

实现效果如下：

更多相关文章

  1. 一键换肤作业
  2. 1. 为翻页按钮添加功能; 2. 当鼠标移出时,图片的每隔2秒的自动播
  3. kivy texture图片格式和opencv numpy图片格式互转
  4. 电商快递物流电子面单图片接口API案例代码
  5. js 轮播图功能：上下翻页，自动播放----0409
  6. 微信小程序生成分享图片踩坑大计划
  7. 前端插件：Web Uploader（上传图片）和富文本编辑器（Ueditor）
  8. 通过实例简单演示 xpath 用法
  9. 使用 Pillow 快速创建 GIF 动图

随机推荐

  1. 如何在python 3中将单词转换为数字（自己的
  2. 【Python】Python脚本实现抢券
  3. 如何使用不同的类python在一个类中的一个
  4. 安装numpy+scipy+matlotlib+scikit-learn
  5. Linux或Linux虚拟机桥接模式使用Python2
  6. [LeetCode][Python][C#]刷题记录 1. 两数
  7. Python3基础教程-廖雪峰[带标签完整版]
  8. wxPython 显示一张图片
  9. eclipse调用python模块是出错及解决
  10. py2exe使用相对路径的当前目录问题