图片懒加载

图片懒加载是前端非常常见的一种优化方式，之前我一直是用各种插件，自己也写过但没在具体项目上用过，刚好今天看见了记录一下。

图片懒加载其实就是先不加载图片，在合适的时候替换图片路径，让其加载出来。这个很方便的实现主要是因为现在我们可以添加data-前缀就被称为data属性，这是我们自定义的，所以我们可以将图片设置为如下

<div class="item">
    <img src="https://loading.io/spinners/comets/index.comet-spinner.svg" alt="" data-original="http://www.pauway.cn/App_Ad/images/0f68f6e8-c72c-4c85-bc8b-c9528c7d042c.jpg">
</div>

前面的src是统一的加载中的动画，后面data-original就是我们要展示图片的真实地址，下面就是js的替换

首先就是获取所有img元素，这个方式比较多

　　 var img1=document.getElementsByTagName("img")
    var img2=document.images;
    var img3=document.querySelectorAll("img");

上面这三种都可以，获取的是一个数组。

然后就是对这个数组进行处理

function loadImg(arr){
        for( var i = 0,len = arr.length; i < len; i++){
            if(arr[i].getBoundingClientRect().top < document.documentElement.clientHeight && !arr[i].isLoad){
                arr[i].isLoad = true;
                arr[i].style.cssText = "transition: ''; opacity: 0;"
                if(arr[i].dataset){
                    aftLoadImg(arr[i],arr[i].dataset.original);
                }else{
                    aftLoadImg(arr[i],arr[i].getAttribute("data-original"));
                }
                (function(i){
                    setTimeout(function(){
                        arr[i].style.cssText = "transition: 1s; opacity: 1;"
                    },16)
                })(i);
            }
        }
    }

大概就是对数组进行循环，如果该元素距离顶部的距离小于窗口的高度，就是该元素进入窗口可视区并且该图像并未被加载，然后就是替换路径了，arr[i].dataset这个是用来兼容的，然后执行aftLoadImg(obj,url)

    function aftLoadImg(obj,url){
        var oImg = new Image();
        oImg.onload = function(){
            obj.src = oImg.src;
        }
        oImg.src = url;
    }

这个也是参考网上某写法，主要是防止图片路径替换后，一时半会未加载好。