js实现图片懒加载原理

原理

图片懒加载是前端页面优化的一种方式，在页面中有很多图片的时候，图片加载就需要很多时间，很耗费服务器性能，不仅影响渲染速度还会浪费带宽，为了解决这个问题，提高用户体验，所以就出现了懒加载这种方式来减轻服务器的压力，优先加载可视区域的内容，其他部分等进入了可视区域再加载，从而提高性能。

实现

思路：在图片没有进入可视区域时，先不给的src赋值，这样浏览器就不会发送请求了，等到图片进入可视区域再给src赋值。图片的真实地址需要存储在data-src中。

图片没有进入可视区域，也就是说图片的offsetTop需要小于页面的可视高度，但想一想，当图片在页面的下方的时候呢，需要页面滚动了一段距离之后才能看到图片，所以这里需要满足img.scrollTop < 页面的可视区域高度+页面滚动的高度，这里是实现图片懒加载的关键，接下来看具体代码的实现

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    img {
      width: 100%;
      vertical-align: top;
      height: 400px;
    }
  </style>
  <body style="margin-bottom: 500px">
    <img
      src=""
      data-src="https://t7.baidu.com/it/u=1595072465,3644073269&fm=193&f=GIF"
    />
    <img
      src=""
      data-src="https://t7.baidu.com/it/u=1595072465,3644073269&fm=193&f=GIF"
    />
    <img
      src=""
      data-src="https://t7.baidu.com/it/u=1595072465,3644073269&fm=193&f=GIF"
    />
    <img
      src=""
      data-src="https://t7.baidu.com/it/u=1595072465,3644073269&fm=193&f=GIF"
    />
    <img
      src=""
      data-src="https://t7.baidu.com/it/u=1595072465,3644073269&fm=193&f=GIF"
    />
    <img
      src=""
      data-src="https://t7.baidu.com/it/u=1595072465,3644073269&fm=193&f=GIF"
    />
  </body>
  <script>
    let imgArr = Array.from(document.querySelectorAll("img"));
    let n = 0;
    let lazyload = function () {
      for (let i = n; i < imgArr.length; i++) {
        console.log(imgArr[i].offsetTop);
        if (
          imgArr[i].offsetTop <
          document.documentElement.scrollTop + window.innerHeight
        ) {
          imgArr[i].src = "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F0196fa582abab6a84a0d304f899eaf.gif&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1653232363&t=49d21374861e863de3d07fc0daee390c";
          let img = new Image();
          img.onload = () => {
            imgArr[i].src = imgArr[i].dataset.src;
          }
          img.src = imgArr[i].dataset.src;
          n = i + 1;
        }
      }
    };
    function _throttle(fn, interval) {
    var last;
    var timer;
    var interval = interval || 200;
    return function () {
        var th = this;
        var args = arguments;
        var now = new Date();
        if (last && now - last < interval) {
            clearTimeout(timer);
            timer = setTimeout(function () {
                last = now;
                fn.apply(th, args);
            }, interval);
        } else {
            last = now;
            fn.apply(th, args);
        }
    }
}
    window.addEventListener("scroll", _throttle(lazyload,1000));
    lazyload();
  </script>
</html>