javascript圖片懶加載

1.啥是圖片懶加載 也就是 圖片在瀏覽器能夠看到的範圍內 把圖片加載出來

2.爲啥要懶加載 由於要減小請求加載 優化速度

3.首先 咱們要forEach循環全部圖片 把全部圖片加載一遍 

lazyRender()
function lazyRender() {
    $('.cover img').each(function () {
     4.在循環裏面進行一系列判斷 
        if (checkShow($(this)) && !isLoaded($(this))) {
            loadImg($(this));
        }
    })
}  

5.我使用了兩個方法來進行判斷是否讓他顯示加載出的圖片

checkShow($(this) 和 !isLoaded($(this))

6.第一個方法 根據瀏覽器的自身高度 和 當前位置距離瀏覽器的高度 以及 每一個圖片距離瀏覽器頂部的高度

function checkShow($img) { // 傳入一個img的jq對象 
        var scrollTop = $(window).scrollTop(); //頁面向上滾動的距離 
        var windowHeight = $(window).height(); // 瀏覽器自身高度
        var offsetTop = $img.offset().top;  //每張圖片距離頭部的距離
           if(offsetTop < (scrollTop + windowHeight) && offsetTop > scrollTop) { 
                 //在2個臨界狀態之間的就爲出如今視野中的 
              return true;
        }
        return false;
}    

8.第二個方法 也就是判斷這張圖片是否加載過 目的 減小沒必要要的重複覆蓋

function isLoaded($img) { return $img.attr('data-src') === $img.attr('src'); //若是data-src和src相等那麼就是已經加載過了 }

這個方法加上個  非 也就是若是加載過是爲真 那麼就返回假   若是沒加載過是爲假 就返回真

9.怎麼實時判斷呢 就用 頁面滾動觸發函數中寫 

 

var clock;    //這裏的clock爲timeID， 返回一個 ID（數字），
 $('window').on('scroll',function(){  //只要在300毫秒內觸發滾動事件，都會被clearTimeout掉，setTimeout不會執行。
 //只要在300毫秒內觸發滾動事件，都會被clearTimeout掉，setTimeout不會執行。
  
  //若是有300毫秒外的操做，會獲得一個新的timeID即clock，會執行一次setTimeout,而後保存此次setTimeout的ID，
    
 //對於300毫秒內的scroll事件，不會生成新的timeID值，因此會一直被clearTimeout掉，不會執行setTimeout.

     if（clock）{
       clearTimeout(clock) //取消定時器
     }
     //爲了避免在滾輪滾動過程當中就一直斷定，設置個setTimeout,等中止滾動後再去斷定是否出如今視野中。
       clock = setTimeout（function（）{
       lazyRender()  //進行判斷方法
     }，300)
})