web前端图片懒加载实现原理（二）

前段时间写了web前端图片懒加载实现原理（一），阐述利用防抖技术实现图片懒加载原理，但仍旧不够完美的是只有停止滚动图片才会显示，这本身也是防抖技术的缺陷，接下来我将介绍如何利用函数节流进行优化~
贴上上一篇文章核心代码：

(function(){//立即执行函数
    let imgList = [],delay,time = 250,offset = 0;
    function _delay(){//函数防抖
        clearTimeout(delay);
        delay = setTimeout(() => {
            _loadImg();
        },time)
    };
    function _loadImg(){//执行图片加载
        for(let i = 0; i < imgList.length; i++){
            if(_isShow(imgList[i])){
                imgList[i].src = imgList[i].getAttribute('data-src');
                imgList.splice(i,1);
            }
        }
    };
    function _isShow(el){//判断img是否出现在可视窗口
        let coords = el.getBoundingClientRect();
        return (coords.left >= 0 && coords.left >= 0 && coords.top) <= (document.documentElement.clientHeight || window.innerHeight) + parseInt(offset);
    };
    function imgLoad(selector){//获取所有需要实现懒加载图片对象引用并设置window监听事件scroll
        _selector = selector || '.imgLazyLoad';
        let nodes = document.querySelectorAll(selector);
        imgList = Array.apply(null,nodes);
        window.addEventListener('scroll',_delay,false)
    };
    imgLoad('.imgLazyLoad')
})()

在这的关键点是把防抖技术贴换成节流函数，节流函数如下：

var canRun = true;
function _throttle() { //函数节流
    if(!canRun) {
        return;
    }
    canRun = false;
    setTimeout(() => {
        console.log('函数节流');
        _loadImg();
        canRun = true;
    },time)
}

• 声明变量canRun控制是否执行setTimeout；初始化为true，第一次执行_throttle函数时立即执行一次setTimeout以达到快速响应用户操作效果
• canRun为true会设置canRun为false并执行setTimeout，直到setTimeout函数里面的延时方法执行时在将canRun重置为true
• 当canRun为false时进入if分支-不进行任何操作并退出，直到上一次setTimeout注册的延时函数执行之后（也就是重置canRun为true）
• 此方法在触发scroll事件时能保证_loadImg函数在time秒内只执行一次而且不必等到停止scroll事件之后才触发
• setTimeout函数说明：代码运行到setTimeout函数时会注册setTimeout里面的延时函数，延时函数并不是在setTimeout里面生命的time毫秒后立即执行，它只是把在time毫秒后被系统添加至任务队列里；执行引擎在主线程方法执行完毕，到达空闲状态时，会从任务队列中顺序获取任务来执行

ok，完善后的代码如下：

(function(){//立即执行函数
    let imgList = [],time = 250,offset = 0,canRun = true;
    function _throttle() { //函数节流
        if(!canRun) {
            return;
        }
        canRun = false;
        setTimeout(() => {
            console.log('函数节流')
            _loadImg();
            canRun = true;
        },time || 500)
    }

    function _loadImg(){//执行图片加载
        for(let i = 0; i < imgList.length; i++){
            if(_isShow(imgList[i])){
                imgList[i].src = imgList[i].getAttribute('data-src');
                imgList.splice(i,1);
            }
        }
    };
    function _isShow(el){//判断img是否出现在可视窗口
        let coords = el.getBoundingClientRect();
        return (coords.left >= 0 && coords.left >= 0 && coords.top) <= (document.documentElement.clientHeight || window.innerHeight) + parseInt(offset);
    };
    function imgLoad(selector){//获取所有需要实现懒加载图片对象引用并设置window监听事件scroll
        _selector = selector || '.imgLazyLoad';
        let nodes = document.querySelectorAll(selector);
        imgList = Array.apply(null,nodes);
        window.addEventListener('scroll',_throttle,false)
    };
    imgLoad('.imgLazyLoad')
})()

至此，图片懒加载实现就告一段落了~