图片的懒加载怎么实现的

预加载：提前加载图片，当用户需要查看时可直接从本地缓存中渲染。

懒加载：懒加载的主要目的是作为服务器前端的优化，减少请求数或延迟请求数。

首先将页面上的图片的 src 属性设为空字符串，而图片的真实路径则设置在data-src属性中，

当页面滚动的时候需要去监听scroll事件，在scroll事件的回调中，判断我们的懒加载的图片是否进入可视区域,如果图片在可视区内将图片的 src 属性设置为data-original 的值，这样就可以实现延迟加载。

流程：

1.将页面中的img标签指向一张小的图片（loading图）或者设为空；（

​不建议设为空，当src为空的时候也会像服务器发送一次请求（指向默认的一张 图片那就只需要请求一次））

2.定义一个data-src属性指向真实的图片地址

3.当载入页面的时候，把可视区域图片的data-src赋值给src；

4.监听滚动事件，加载用户即将看到的图片（利用图片出现时距离顶部的高度（offsetTop）《 滚动条滚动的高度+可视区的高度）

5 滚动（scroll）事件要采用节流的方式，避免多次触发该事件;

• 去抖动原理： 当调用动作n毫秒后，才会执行该动作，若在这n毫秒内又调用此动作则将重新计算执行时间。

不足:当我一直滚动鼠标的时候，lazyload函数就会不断被延迟，这样只有停下来的时候才会执行，那么再有些需要及时显示的情况下，就显得不那么友好了

• 节流原理：预设一个执行周期，如果这个周期结束了都还没触发函数，那就会执行一次函数；如果这个周期还没结束就触发了函数，那定时器将重置，开始新周期。

达到了想要的效果，既没有频繁的执行也没有延迟执行

 (function(){
     
    let num = document.getElementsByTagName('img').length;
    let img = document.getElementsByTagName("img");
    let n = 0; //存储图片加载到的位置，避免每次都从第一张图片开始遍历
    lazyload(); //页面载入完毕加载可是区域内的图片
     window.onscroll = lazyload;
    function lazyload() {
      //监听页面滚动事件
        let seeHeight = document.documentElement.clientHeight; //可见区域高度
        let scrollTop = document.documentElement.scrollTop || document.body.scrollTop; //滚动条距离顶部高度
        for (let i = n; i < num; i++) {
     
            // 图片未出现时距离顶部的距离大于滚动条距顶部的距离+可视区的高度
            if (img[i].offsetTop < seeHeight + scrollTop) {
     
                if (img[i].getAttribute("src") == "") {
     
                    img[i].src = img[i].getAttribute("data-src");
                }
                n = i + 1;
            }
        }
    }
    })()