資源的按需加載和預加載
按需加載即賴加載
我們用原生代碼一步一步的來實現
第一步
先在所有的圖片標籤中放入一張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文件)的懶加載都可以類似圖片懶加載,這裏不進行過多的介紹