溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

js圖片延遲加載(Lazyload)三種實(shí)現(xiàn)方式

發(fā)布時間：2020-10-21 03:14:42 來源：腳本之家 閱讀：210 作者：小小趙老漢 欄目：web開發(fā)

延遲加載也稱為惰性加載，即在長網(wǎng)頁中延遲加載圖像。

用戶滾動到它們之前，視口外的圖像不會加載。

這與圖像預(yù)加載相反，在長網(wǎng)頁上使用延遲加載將使網(wǎng)頁加載更快。

在某些情況下，它還可以幫助減少服務(wù)器負(fù)載。

延遲加載的優(yōu)點(diǎn)：

提升用戶的體驗，如果圖片數(shù)量較大，打開頁面的時候要將將頁面上所有的圖片全部獲取加載，很可能會出現(xiàn)卡頓現(xiàn)象，影響用戶體驗。因此，有選擇性地請求圖片，這樣能明顯減少了服務(wù)器的壓力和流量，也能夠減小瀏覽器的負(fù)擔(dān)。

方法一

將頁面上所有圖片的src屬性設(shè)置為loading.gif，而圖片的真實(shí)路徑則設(shè)置在data-src屬性中。

當(dāng)頁面滾動的時候計算圖片位置和滾動的位置，當(dāng)圖片出現(xiàn)在瀏覽器視口內(nèi)時，將圖片的src屬性設(shè)置為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);

方法二

上面的方法雖然沒什么問題，但是性能較差，因為當(dāng)頁面滾動時，scroll事件會高頻觸發(fā)，這非常影響瀏覽器性能。
所以，這里要對lazyload函數(shù)進(jìn)行函數(shù)節(jié)流（throttle）與函數(shù)去抖（debounce）處理。

函數(shù)節(jié)流（throttle）與函數(shù)去抖（debounce）

這里html和css代碼不變，經(jīng)過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，可以自動"觀察"元素是否可見。

用這種方法實(shí)現(xiàn)代碼非常簡潔，但是許多瀏覽器不支持。

js圖片延遲加載(Lazyload)三種實(shí)現(xiàn)方式

  • IntersectionObserver 傳入一個回調(diào)函數(shù)，當(dāng)其觀察到元素集合出現(xiàn)時候，則會執(zhí)行該函數(shù)。
  • io.observe 即要觀察的元素，要一個個添加才可以。
  • io 管理的是一個數(shù)組，當(dāng)元素出現(xiàn)或消失的時候，數(shù)組添加或刪除該元素，并且執(zhí)行該回調(diào)函數(shù)。

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);

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手