图片懒加载

js图片懒加载
原理：自定义data-src属性保存图片的真实地址。窗口滚动时，遍历所有未加载图片的图片节点，判断该图片节点是否在可视区域内，如果是，设置图片节点的src属性为data-src的值，并把它从未加载图片的图片节点数组删除。

<img class="lazyimg" data-src="img/pannel2.png" alt="">

var checkInView=(img)=>{//判断图片是否在可视区域内
    let scrollTop=document.body.scrollTop||document.documentElement.scrollTop;
    let clientHeight=document.documentElement.clientHeight;
    if(img.offsetTop<scrollTop+clientHeight+50){
        return true;
    }
    return false;
};
var lazyload=()=>{
    var lazyimgs=document.querySelectorAll('.lazyimg');//得到nodelist对象
    lazyimgs=[].slice.apply(lazyimgs);//对象转为数组
    var loadImgs=()=>{
        if(lazyimgs.length==0){//所有图片都加载出来后，取消监听
            window.removeEventListener('scroll', loadImgs, false);
            return;
        }
        for(let i=0;i<lazyimgs.length;i++){
            if(checkInView(lazyimgs[i])){
                lazyimgs[i].setAttribute('src',lazyimgs[i].getAttribute('data-src'));
                lazyimgs.splice(i,1);//删除已加载的图片节点
            }
        }
    };
    return loadImgs;
}
window.addEventListener('scroll', lazyload(), false);