javascript之圖片懶加載

資源的按需加載和預加載

按需加載即賴加載

我們用原生代碼一步一步的來實現

第一步
先在所有的圖片標籤中放入一張loading圖片用於顯示，data-src這個自定義標籤放入真正的圖片地址，假設這些圖片早已超出可見高度

<img src="img/loading.gif" data-src="img/1.jpg"  class="lazyload-img">
<img src="img/loading.gif" data-src="img/2.jpg"  class="lazyload-img">
<img src="img/loading.gif" data-src="img/3.jpg"  class="lazyload-img">
<img src="img/loading.gif" data-src="img/4.jpg"  class="lazyload-img">
<img src="img/loading.gif" data-src="img/5.jpg"  class="lazyload-img">
<img src="img/loading.gif" data-src="img/6.jpg"  class="lazyload-img">
<img src="img/loading.gif" data-src="img/7.jpg"  class="lazyload-img">
<img src="img/loading.gif" data-src="img/8.jpg"  class="lazyload-img">
<img src="img/loading.gif" data-src="img/9.jpg"  class="lazyload-img">
<img src="img/loading.gif" data-src="img/10.jpg"  class="lazyload-img">

第二步

var lazyLoadClass = '.lazyload-img' //具有這個類屬性的都是需要賴加載的圖片
//獲取文件中需要圖片賴加載的標籤，並將他（類數組）轉換爲數組
var imgArr = 
Array.prototype.slice.call(document.querySelectorAll(lazyLoadClass))

實現懶加載函數

function lazyLoadImgs(){
    for(var i=0;i<imgArr.length;i++){
        if(isVisibleArea(imgArr[i])){
            //data-src是自定義標籤，裏面存放了需要加載圖片的地址
            imgArr[i].src = imgArr[i].getAttribute('data-src')
            imgArr.splice(i,1)
            i--
        }
    }
}

判斷是否在可視區範圍內

function isVisibleArea(el){
    var rect = el.getBoundingClientRect()
    return rect.bottom>0&&rect.top<window.innerHeight&&rect.right>0&&rect.left<window.innerWidth
}

觸發該賴加載

setTimeout(lazyLoadImgs,100) //先調用一次，首頁加載
var timer = null;
window.addEventListener('scroll', function () {
    clearTimeout(timer);
    timer = setTimeout(function () {
        lazyLoadImgs();
    }, 100);
}, false);

預加載：看漫畫時，讓其先加載5頁，當看到第4頁的時候，再加載5頁。這裏只做簡單的介紹。

 // 圖片預加載
 var img = new Image();
 img.src = 'img/recommend/5.jpg';

其餘資源（如js文件，css文件）的懶加載都可以類似圖片懶加載，這裏不進行過多的介紹