延遲加載(Lazyload)三種實現方式

niuxiaowei111 發布于2019-08-21 15:18 / 2387人閱讀

摘要：原文鏈接延遲加載也稱為惰性加載，即在長網頁中延遲加載圖像。傳入一個回調函數，當其觀察到元素集合出現時候，則會執行該函數。管理的是一個數組，當元素出現或消失的時候，數組添加或刪除該元素，并且執行該回調函數。

原文鏈接 - https://zhuanlan.zhihu.com/p/25455672

延遲加載也稱為惰性加載，即在長網頁中延遲加載圖像。
用戶滾動到它們之前，視口外的圖像不會加載。
這與圖像預加載相反，在長網頁上使用延遲加載將使網頁加載更快。
在某些情況下，它還可以幫助減少服務器負載。

延遲加載的優點：

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

方法一

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

當頁面滾動的時候計算圖片位置和滾動的位置，當圖片出現在瀏覽器視口內時，將圖片的src屬性設置為data-src的值。

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，可以自動"觀察"元素是否可見。

IntersectionObserver API 使用教程

用這種方法實現代碼非常簡潔，但是許多瀏覽器不支持。

IntersectionObserver 傳入一個回調函數，當其觀察到元素集合出現時候，則會執行該函數。

io.observe 即要觀察的元素，要一個個添加才可以。

io 管理的是一個數組，當元素出現或消失的時候，數組添加或刪除該元素，并且執行該回調函數。

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

GPU云服務器云服務器 ddos三種攻擊方式服務器的三種存儲方式阿里云發送郵件的三種方式三種實現方法

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/88152.html

圖片懶加載通俗易懂

摘要：懶加載的意義這里懶的意思可以理解為延遲，如淘寶京東這些電商平臺有大量的圖片，如果上來就加載服務器表示壓力山大，所以就想出了懶加載這種克敵之法，用戶滾動到的區域才發送請求加載內容原理將頁面中的標簽指向一張小照片或者為空都可以，然后寫一個自定義懶加載的意義這里‘懶’的意思可以理解為延遲，如淘寶、京東這些電商平臺有大量的圖片，如果上來就加載服務器表示壓力山大，所以就想出了懶加載這種克敵之...

NervosNetwork 2019-08-23 15:13 評論0 收藏0
原生實現img-lazyLoad:圖片延遲加載（基于intersection Observer）

摘要：接下來，我們需要利用對這些暫時看不見的圖片元素進行觀察，當確認他們滾動到了窗體的可視區域時，我們在回調函數中對其進行加載。創建一個，配置元素和回調函數觸發機制，這里我們將這個設為。點擊查看視頻教程哦?。。。?intersection Observer簡介點擊查閱MDN關于此api的使用說明這個api是用來檢測dom元素交集的，常見的應用場景之一就是本文提到的對圖片進行懶加載，即：...

shuibo 2019-08-23 15:05 評論0 收藏0
A: 如何實現 Lazy Load？

摘要：最近面試了幾家公司，他們不約而同都問到了這個問題了解嗎其實是對圖片的一種延遲加載技術，直到用戶滾動圖片出現在用戶可視范圍時才把它加載出來。我在上親身實踐了一下，然而發現，總是返回，其他兩種方法都正常獲取到了值。最近面試了幾家公司，他們不約而同都問到了這個問題：了解 Lazy Load 嗎？ Lazy Load is delays loading of images in long ...

Miyang 2019-08-20 15:22 評論0 收藏0
實現圖片懶加載(lazyload)

摘要：當頁面圖片很多時，頁面的加載速度緩慢，幾鐘內頁面沒有加載完成，也許會失去很多的用戶。指向一張默認的圖片，否則當為空時也會向服務器發送一次請求。這樣便實現了懶加載。我想實現限制觸發頻率，來優化性能。本文標題:實現圖片懶加載(lazyload)文章作者:Jake發布時間:2016-11-26, 18:46:34最后更新:2016-11-28, 17:12:59原始鏈接:http://i....

renweihub 2019-08-30 13:10 評論0 收藏0
實現圖片懶加載(lazyload)

摘要：當頁面圖片很多時，頁面的加載速度緩慢，幾鐘內頁面沒有加載完成，也許會失去很多的用戶。指向一張默認的圖片，否則當為空時也會向服務器發送一次請求。這樣便實現了懶加載。我想實現限制觸發頻率，來優化性能。本文標題:實現圖片懶加載(lazyload)文章作者:Jake發布時間:2016-11-26, 18:46:34最后更新:2016-11-28, 17:12:59原始鏈接:http://i....

Developer 2019-08-22 10:44 評論0 收藏0