一.什么是懒加载？

懒加载也叫延迟加载，指的是在长网页中延迟加载图像，是一种很好优化网页性能的方式。用户滚动到它们之前，可视区域外的图像不会被加载。

二.懒加载有什么作用？

  1. 能提升用户的体验。如果页面上所有的图片都需要加载，等待时间会很长，这就会严重影响用户体验。
  2. 减少无效资源的加载，减轻服务器的压力和流量，减小浏览器的负担。
  3. 防止并发加载的资源过多会阻塞js的加载。

三. 实现原理

将页面上的图片的 src 属性设为空字符串，图片的真实路径则设置在data-original属性中。要用的时候就取出来，把它的值赋值给img的 src 属性。

四. 实现

1
2
3
4
5
6
7
8
9
10
11
<div class="box">
    <img data-original="img/1.jpg">
    <img data-original="img/2.jpg">
    <img data-original="img/3.jpg">
    <img data-original="img/4.jpg">
    <img data-original="img/5.jpg">
    <img data-original="img/6.jpg">
    <img data-original="img/7.jpg">
    <img data-original="img/8.jpg">
    <img data-original="img/9.jpg">
</div>
1
2
3
4
5
img{
     display: block;
     margin-bottom: 50px;
     height: 200px;// 一定要设置图片高度
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
const imgs = document.getElementsByTagName('img');

function lazyLoad(imgs) {
  // 视口高度；
  const clientH = document.documentElement.clientHeight;
  // 滚动距离
  const clientT = document.documentElement.scrollTop || document.body.scrollTop;
  for (let i = 0; i < imgs.length; i++) {
      // 如果视口高度+滚动距离 > 图片到浏览器顶部的距离就去加载；
      // !imgs[i].src 是避免来回滚动时重复请求
      if (clientH + clientT > imgs[i].offsetTop && !imgs[i].src) {
          // 使用data-xx的自定义属性可以通过dom元素的dataset.xx取得；
          imgs[i].src = imgs[i].dataset.original;
      }
   }
};

lazyLoad(imgs);
// 监听滚动，加载后面的图片；
window.onscroll = () => lazyLoad(imgs);