关于JavaScript图片懒加载与防抖节流

什么是图片的懒加载？

当图片进入浏览器的可视区域，才加载该图片。这样大大加快了对与图片较多的页面的加载熟虑。例如一些较大型网上商城，一个页面有很多的图片，如果不使用懒加载，用户进入网页的速度会相当慢，这样用户体验可能就没那么好了。

实现原理：页面的<img>标签中不设置src属性，将图片的链接写到data-XXX(XXX自定义)，当img标签中没有src属性，那么浏览器就不会去发请求加载图片。当目标img滑动到浏览器的可视区域时，通过js设置目标img的src属性，图片才会被加载出来。

先贴下html代码吧，下面所说的方法用的html代码都一样

<div class="img-lists">
        <div class="img-item">
            <img class="img" data-src="./img/1.jpg" alt="loading">
        </div>
        <div class="img-item">
            <img class="img" data-src="./img/2.jpg" alt="loading">
        </div>
        <div class="img-item">
            <img class="img" data-src="./img/3.jpg" alt="loading">
        </div>
        <div class="img-item">
            <img class="img" data-src="./img/4.jpg" alt="loading">
        </div>
        <div class="img-item">
            <img class="img" data-src="./img/5.jpg" alt="loading">
        </div>
        <div class="img-item">
            <img class="img" data-src="./img/6.jpg" alt="loading">
        </div>
        <div class="img-item">
            <img class="img" data-src="./img/7.jpg" alt="loading">
        </div>
        <div class="img-item">
            <img class="img" data-src="./img/8.jpg" alt="loading">
        </div>
        <div class="img-item">
            <img class="img" data-src="./img/9.jpg" alt="loading">
        </div>
        <div class="img-item">
            <img class="img" data-src="./img/10.jpg" alt="loading">
        </div>
    </div>

实现方法1:

第一种相对简单就直接贴代码吧，虽然不推荐这种方法

方法二：

相对第一种方法来说，个人比较推荐第二种方法

在介绍第二种方法之前先看一张图

<figcaption> 该图引用MDN </figcaption>

我们将使用getBoundingClientRect()来返回一个元素的位置信息，该对象的返回值是一个DOMRech 对象，这个对象是由该元素的 getClientRects()方法返回的一组矩形的集合, 即：是与该元素相关的CSS 边框集合。

由上面的图可以了解到除了 width 和 height 外的属性都是相对于视口的左上角位置而言的。

代码如下：

var clientHeight = window.innerHeight;//可视化窗口的高度
        function getImgs(){
            const imglist = document.querySelectorAll(".img");
            Array.from(imglist).forEach(el=>{
                if(isShow(el)){
                    loadImg(el)
                }
            })
        }
        /*
        *判断是否进入可视化窗口        
        */
        function isShow(el){
           const bound = el.getBoundingClientRect();//获取元素位置
           return bound.top <= clientHeight+50;//+50提前加载
        }
        /*
        * 加载图片        
        */
        function loadImg(el){
           if(!el.src){
            const source = el.dataset.src;
                   el.src = source
           }
        }

当是呢，如果频繁滚动滚动条的话，会对计算机资源的一种浪费，这时候就需要运用到函数去抖或者函数节流啦

函数去抖：就是函数调用后在一段时间后才执行，如果在这段时间内，函数再次被调用，会重置这个时间，然后重新等待一段时间之后再执行。例如调用fn函数后，该函数2s后再执行，等到1s钟的时候，该函数又被调用了一次，这时候就时间就会重置，然后重新再等2s，该函数才会执行。

下面就贴一个简单的防抖函数：