利用jquery实现图片懒加载

什么是懒加载？
当用户滚动相应可视区域，若可视区域有图片便加载，而在可视区域外未加载过的图片它们先不加载，如果用户滚动可视区域到它们时它们再加载，否则一律不加载。这样一来就大大提高了网页渲染的性能和减少不必要的浪费。
(1)原生js
首先，尝试用原生js来实现
html部分

 <div class="web">
      <div class="img1">
        <img
          src="./u=1734642970,311190705&fm=253&fmt=auto&app=138&f=JPEG.webp"
          alt=""
        />
      </div>
      <div class="img2">
        <img
          src="./u=2863108920,4275403644&fm=253&fmt=auto&app=138&f=JPEG.webp"
          alt=""
        />
      </div>
      <div class="flex-box">
        <div class="img3">
          <img
            class="img-fluid"
            src="./u=3728574222,3426081649&fm=253&fmt=auto&app=120&f=JPEG.webp"
            alt=""
          />
        </div>
        <div class="img4">
          <img
            class="img-fluid"
            src="./u=2981296392,2811169731&fm=253&fmt=auto&app=138&f=JPEG.webp"
            alt=""
          />
        </div>
      </div>

      <div class="img5">
        <img
          src="./u=3728574222,3426081649&fm=253&fmt=auto&app=120&f=JPEG.webp"
          alt=""
        />
      </div>
      <div class="img6">
        <img
          class="lazy"
          src="./src=http___tva1.sinaimg.cn_large_006APoFYly1g8mf9qe5udg30jz0jzjtr.gif&refer=http___tva1.sinaimg.gif"
          data-original="./u=705102279,1721672537&fm=253&fmt=auto&app=138&f=JPEG.webp"
          alt=""
        />
        <span>测试</span>
      </div>
    </div>

然后是js部分：

 let isRun = true;
      let img6Dom = document.querySelector(".img6 img");
      window.addEventListener("scroll", function () {
        console.log(img6Dom.getBoundingClientRect().top);
        if (
          document.documentElement.clientHeight + 100 >=
            img6Dom.getBoundingClientRect().top &&
          isRun
        ) {
          isRun = false;
          img6Dom.src = img6Dom.dataset.original;
        }
      });

这里用到了getBoundingClientRect().top也就是元素上边到视窗上边的距离，而document.documentElement.clientHeight则是用来获取页面可视高度，当后者大于或等于前者时，就可以加载图片了

(2)jquery
a.引入相关依赖

<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<script src="./lazyLoad.js"></script>

b.给要懒加载的img标签添加自定义属性data-original（注：该属性内的值为要加载的图片路径，而src内的值可以替换成过渡图片地址 ）以及特定的class（例如:lazy）。

c.js代码如下：

 $(function () {
        $("img.lazy").lazyload({
          effect: "fadeIn",
          // effect: "show",
          threshold: 10,
        });
      });

$("img.lazy")使所有 class 为 lazy 的图片将被延迟加载；effect设置特效；threshold设置临界值，默认情况下图片会出现在屏幕时加载. 如果想提前加载图片, 可以设置threshold 选项, 设置 threshold 为 200 令图片在距离屏幕 200 像素时提前加载。

除此以外，还可以添加event选项，也就是用来触发加载的事件，可以是click、mouseover等，也可以是自定义事件。

参考：https://www.jb51.net/article/134208.htm
https://www.jianshu.com/p/7821ecf98a39
https://www.cnblogs.com/mangofish/p/16074611.html
https://www.w3cways.com/1765.html