图片懒加载/图片延时加载(封好的方法带注释可研究可直接使用)

这是是一个封装好的图片懒加载的方法，为图片加上了一个渐现的动画（一开始拿js写的渐现，后来发现效果太差改用css来写的动画，渐现效果确实不错，不得不说c3的动画确实比js的流畅太多了，直接将方法和动画复制过去就可以调用，lazyLoad传入图片元素集合或者单张就可以了）

/*图片懒加载动画*/
@keyframes c3 {
    0%{opacity: 0.0}
    50%{opacity: 0.5}
    100%{opacity: 1}
}

 /**
     图片懒加载(引入utils.css)
     图片懒加载(渐现显示)=>如果传入是的使用getElementsByTagName等返回获得的元素节点集合，则会对集合中所有的元素添加图片懒加载
     如果传入的是单个图片元素，则会对这单个图片元素添加图片懒加载
     但是这些图片元素的格式必须是：src为默认图片(一般是什么图片加载中等图示)，data-src为真实图片路径
     */
    function lazyLoad(imgList){
//          目标高度=浏览器卷起高度+浏览器可视区域的高度(直白点就是滚动条滚动距离+浏览器窗口高度)
        let nWinZ=document.documentElement.clientHeight+document.documentElement.scrollTop;
        if(Object.prototype.toString.call(imgList)=='[object HTMLCollection]'){
            for(var i=0;i<imgList.length;i++){
                imgLoad(imgList[i]);
            }
        }else{
            imgLoad(imgList);
        }
        function imgLoad(ele){
            //图片加载高度点=图片的上偏移量+图片的高度(图片距浏览器顶端距离+图片的高度)
            nImgZ=ele.offsetTop+ele.clientHeight;
            //判断图片是否被加载过，是返回true，不是就没有load属性，undefined=>fasle
            if(ele.load){
                return;
            }
            if(nWinZ>=nImgZ){
                //条件成立就表示图片已经完全进入可视区域
                let strImgPath=ele.getAttribute('data-src');
                //这里创建了一个假img元素先来试一下这个路径是否可用
                let newImg=document.createElement('img');
                newImg.src=strImgPath;
                //图片加载完成后就不行再进行这个图片加载了，为其设置一个属性来标识其是否加载过,当滚动条再次变化的时候就不需要进行这些更换路径的操作了
                ele.load=true;
                //如果这个假img元素的图片请求完成就会触发onload事件，这样路径就是正确可访问的，就赋给我们的页面图片中替换地址
                newImg.onload=function(){
                    ele.src=strImgPath;
                    ele.style.animation='c3 500ms linear 0s 1 forwards';
                }
            }
        }
    }