浅析滚动懒加载图片原理

图片懒加载在多图业务项目开发中，已经快被用烂了，前两天出去面试的朋友发我一条消息，面试官问到滚动图片懒加载原理，他一脸懵逼，平时只会用，没有深入研究这东西，这回吃亏了。
现在写下这个，是为了警醒自己，对待知识，不要只会皮毛，不要将就。
首先，就是html，(css就省略了）

  //html
    <ul>
        <li>
            <img class='lazyLoad_img' src="" alt="" data-src='//upload.jianshu.io/users/upload_avatars/5710540/21375345-6956-4793-b0a3-c074431422e4.png' />
        </li>
        <li>
            <img class='lazyLoad_img' src="" alt="" data-src='//upload.jianshu.io/users/upload_avatars/5710540/21375345-6956-4793-b0a3-c074431422e4.png' />
        </li>
        <li>
            <img class='lazyLoad_img' src="" alt="" data-src='//upload.jianshu.io/users/upload_avatars/5710540/21375345-6956-4793-b0a3-c074431422e4.png' />
        </li>
        <li>
            <img class='lazyLoad_img' src="" alt="" data-src='//upload.jianshu.io/users/upload_avatars/5710540/21375345-6956-4793-b0a3-c074431422e4.png' />
        </li>
    </ul>

首先看html结构，注意我并没有在img标签上直接写入src值，而是让动态加载（实际项目图片链接会动态加载）的图片地址放在data-src上。

//js
 ;(function(){
        let [imgList,delay,time] = [[],null,200];
        //滚动执行的入口函数
        var  throttleLoad = ()=>{
            clearTimeout(delay);
            //函数节流:避免高频事件导致浏览器掉帧，优化加载性能，提升用户体验，降低服务器压力（存在请求的情况下）
            delay = setTimeout(()=>{
                loadImg();
            },time)
        }
        //判断图片是否显示在可视区域
        var isShow = (element)=>{
            //getBoundingClientRect()用于获取元素相对于视口的位置，用top,right,bottom,left表示，元素的这个四个属性都是相对于视口的left和top来说的。
            let base = element.getBoundingClientRect();
            return (base.left && base.left >=0 && base.top && base.top >= 0) <= (document.clientHeight || window.innerHeight);
        }
        //加载图片
        var loadImg = ()=>{
            for(let i = 0,len = imgList.length;i<len;i++){
                if(isShow(imgList[i])){
                    //使用getAttribute()也可以
                    imgList[i].src = imgList[i].dataset.src;
                    //删除已经加载的图片元素，避免重复查询，提高性能
                    imgList.splice(i,1);
                }
            }
        }
        
        var init = (selector)=>{
            selector = selector || '.lazyLoad_img';
            let nodes = document.querySelectorAll(selector);
            //将nodeList转换成数据类型array
            imgList = Array.apply(null,nodes);
            window.addEventListener('scroll',throttleLoad,false)
        }
        init('.lazyLoad_img');
    })();

相关技术点放在注释里了，如果有不清楚的地，请Google。
这里还有一点要说明的是，imgList里面放的所有需要懒加载的图片集合，数据类型是复杂数据类型，会被存储在堆内存中，而栈内存中只保留了访问所在堆内存地址的指针，当浏览器要加载的时候，会首先找到放在栈内存中的指针，然后根据这个指针再访问实体数据。所以这里面涉及到内存的操作，建议尽可能的优化加载逻辑降低内存使用率，提高加载效率。