圖片懶加載

圖片懶加載是前端很是常見的一種優化方式，以前我一直是用各類插件，本身也寫過但沒在具體項目上用過，恰好今天看見了記錄一下。

圖片懶加載其實就是先不加載圖片，在合適的時候替換圖片路徑，讓其加載出來。這個很方便的實現主要是由於如今咱們能夠添加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;
    }

這個也是參考網上某寫法，主要是防止圖片路徑替換後，一時半會未加載好。