懒加载js实现和优化

1.懒加载的作用和原理
　　在我们展示多图片的场景下，类似淘宝或者百度图片，由于图片的数目过多，全部从服务器请求会给用户糟糕的用户体验，为了提升用户体验，我们这里使用懒加载，随着下拉逐步加载。
　　每个图片的src会有一个get请求，我们把不能看到的图片src设置为相同的图片，这些图片发一次请求即可，设置属性data-src为真正的图片路径。当图片滚动到可视区，我们就用js把data-src 赋值给 src，简单的懒加载就可以实现了。
2.简单的js实现懒加载

<script type="text/javascript">
        let imgArr = document.querySelectorAll('img');
        let len = imgArr.length;
        window.onscroll = function () {
            let seeHeight = document.documentElement.clientHeight;
            let scrollTop =  document.body.scrollTop || document.documentElement.scrollTop;
            for(let i=0; i<len; i++){
                console.log(imgArr[i].offsetTop);
                if(imgArr[i].offsetTop < seeHeight + scrollTop){
                        if(imgArr[i].getAttribute('src')=='timg.jpg'){
                            imgArr[i].src = imgArr[i].getAttribute('data-src');
                        }
                }
            }
        }
</script>

我们根据js代码分析一下，主要有两部分
1>.如何加载图片?
　　　img.src = img.getAttribute(‘data-src’);
2>.如何判断是否在可视区
　　　　就是 图片的 offsetTop < scrollTop + clientHeigth 即可
　　


好了上面就是我们简单的js实现和原理，但是看到各位大佬提到这里有需要优化的地方。
1.在初始条件下，应该有图片显示，只要在加载完毕之后滚动之前执行图片的加载即可
2.函数节流，但我们在高频度的滚动时，每隔一段事件开始图片的渲染。实现原理是 加入一个开关变量, 控制每隔固定的一段时间,函数才可能被触发

<script type="text/javascript">
        let imgArr = document.querySelectorAll('img');
        let len = imgArr.length;
        let n = 0; //记录加载图片的位置，避免从第一张开始加载
        let canrun = true;
        let seeHeight = document.documentElement.clientHeight;  // 窗口的可视高度
        lazyLoad();
        window.onscroll = function () {
            if(!canrun){
                return ;
            }
            canrun = false;
            setTimeout(function () {
                lazyLoad();
                canrun= true;
            },1000);
        }
        function lazyLoad() {
          //  每次触发函数时获取当前滚动条距离顶部的距离
            let scrollTop =  document.body.scrollTop || document.documentElement.scrollTop;
            for(let i=0; i<len; i++){
         // 当图片距离顶部的距离 小于 视口的高度加滚动条距离顶部的距离时（屏幕滚动到图片位置时）
                if(imgArr[i].offsetTop < seeHeight + scrollTop){
                    if(imgArr[i].getAttribute('src')=='timg.jpg'){
                        imgArr[i].src = imgArr[i].getAttribute('data-src');
                    }
                    n = i+1;
                }
            }
        }
</script>