溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
延遲加載也稱為惰性加載，即在長網頁中延遲加載圖像。
用戶滾動到它們之前，視口外的圖像不會加載。
這與圖像預加載相反，在長網頁上使用延遲加載將使網頁加載更快。
在某些情況下，它還可以幫助減少服務器負載。
延遲加載的優點：
提升用戶的體驗，如果圖片數量較大，打開頁面的時候要將將頁面上所有的圖片全部獲取加載，很可能會出現卡頓現象，影響用戶體驗。因此，有選擇性地請求圖片，這樣能明顯減少了服務器的壓力和流量，也能夠減小瀏覽器的負擔。
方法一
將頁面上所有圖片的src屬性設置為loading.gif，而圖片的真實路徑則設置在data-src屬性中。
當頁面滾動的時候計算圖片位置和滾動的位置，當圖片出現在瀏覽器視口內時，將圖片的src屬性設置為data-src的值。
<img src="loading.png" data-src="image.png">
img { display: block; margin-bottom: 50px; }
function lazyload() {
var images = document.getElementsByTagName('img');
var n = 0; // 用于存儲圖片加載到的位置，避免每次都從第一張圖片開始遍歷
return function() {
var seeHeight = document.documentElement.clientHeight;
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
for(var i = n; i < images.length; i++) {
if (images[i].offsetTop < seeHeight + scrollTop) {
if (images[i].getAttribute('src') === 'loading.png') {
images[i].src = images[i].getAttribute('data-src');
}
n = n + 1;
}
}
}
}
lazyload(); //初始化首頁的頁面圖片
window.addEventListener('scroll', lazyload(), false);
方法二
上面的方法雖然沒什么問題，但是性能較差，因為當頁面滾動時，scroll事件會高頻觸發，這非常影響瀏覽器性能。
所以，這里要對lazyload函數進行函數節流（throttle）與函數去抖（debounce）處理。
函數節流（throttle）與函數去抖（debounce）
這里html和css代碼不變，經過throttle處理的js代碼如下：
function throttle (fn, delay, atleast) {
var timeout = null,
startTime = new Date();
return function () {
var curTime = new Date();
clearTimeout(timeout);
if (curTime - startTime >= atleast) {
fn ();
startTime = curTime;
} else {
timeout = setTimeout (fn, delay);
}
}
}
function lazyload() {
var images = document.getElementsByTagName('img'),
n = 0; //存儲圖片加載到的位置，避免每次都從第一張圖片開始遍歷
return function() {
var seeHeight = document.documentElement.clientHeight;
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
for(var i = n; i < images.length; i++) {
if(images[i].offsetTop < seeHeight + scrollTop) {
if(images[i].getAttribute('src') === 'loading.png') {
images[i].src = images[i].getAttribute('data-src');
}
n = n + 1;
}
}
}
}
lazyload(); //初始化首頁的頁面圖片
window.addEventListener('scroll', throttle(lazyload(), 500, 1000), false);
方法三
目前有一個新的 IntersectionObserver API，可以自動"觀察"元素是否可見。
用這種方法實現代碼非常簡潔，但是許多瀏覽器不支持。
function query(selector) {
return Array.from(document.querySelectorAll(selector));
}
var io = new IntersectionObserver(function(items) {
items.forEach(function(item) {
var target = item.target;
if(target.getAttribute('src') == 'loading.png') {
target.src = target.getAttribute('data-src');
}
})
});
query('img').forEach(function(item) {
io.observe(item);
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
