图片懒加载

原理:

对于页面有很多静态资源的情况下（比如网商购物页面），为了节省用户流量和提高页面性能，可以在用户浏览到当前资源（当前窗口（可视区域）的大小）的时候，再对资源进行请求和加载。

概念:

我们的图片要显示出来的话一般是借用img标签，然后把src属性写上图片的地址，才能把图片显示出来，那就想，我们先把图片不显示出来，就来写一个自定义属性字段，把这个属性字段的值写成图片地址，当图片在可视区域的范围的时候，就把自定义属性的值作为src的值。这就实现了懒加载。

• clientHeight：浏览器视口的高度；
• scrollTop：滚动轴滚动的距离；
• offsetTop：图片的头部距离浏览器顶部的高度（注意不是距离视口顶部的高度）；

如何让图片不加载?

在img标签的src前加上data-

 

在我们滚动滚动轴的时候，当下一张图片的顶部马上要出现在视口的时候去加载下一张图片。 

• offsetTop：直接通过img.offsetTop就可以获取；
• scrollTop：通过document.documentElement.scrollTop获取；
• clientHeight：通过document.documentElement.clientHeight获取；

 完整js代码:

//图片懒加载
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.src;
    }
  }
};
// 一开始能够加载显示在视口中的图片；
lazyLoad(imgs);
// 监听滚动事件，加载后面的图片；
window.onscroll = () => lazyLoad(imgs);