国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

niuxiaowei111 / 2380人閱讀

摘要:原文鏈接延遲加載也稱為惰性加載,即在長網(wǎng)頁中延遲加載圖像。傳入一個回調(diào)函數(shù),當(dāng)其觀察到元素集合出現(xiàn)時候,則會執(zhí)行該函數(shù)。管理的是一個數(shù)組,當(dāng)元素出現(xiàn)或消失的時候,數(shù)組添加或刪除該元素,并且執(zhí)行該回調(diào)函數(shù)。

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

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

延遲加載的優(yōu)點

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

方法一

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

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

上面的方法雖然沒什么問題,但是性能較差,因為當(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,可以自動"觀察"元素是否可見。

IntersectionObserver API 使用教程

用這種方法實現(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);
});

文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/88152.html

相關(guān)文章

  • 圖片懶加載通俗易懂

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

    NervosNetwork 評論0 收藏0
  • 原生實現(xiàn)img-lazyLoad:圖片延遲加載(基于intersection Observer)

    摘要:接下來,我們需要利用對這些暫時看不見的圖片元素進(jìn)行觀察,當(dāng)確認(rèn)他們滾動到了窗體的可視區(qū)域時,我們在回調(diào)函數(shù)中對其進(jìn)行加載。創(chuàng)建一個,配置元素和回調(diào)函數(shù)觸發(fā)機(jī)制,這里我們將這個設(shè)為。 點擊查看視頻教程哦!!!! intersection Observer簡介 點擊查閱MDN關(guān)于此api的使用說明 這個api是用來檢測dom元素交集的,常見的應(yīng)用場景之一就是本文提到的對圖片進(jìn)行懶加載,即:...

    shuibo 評論0 收藏0
  • A: 如何實現(xiàn) Lazy Load?

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

    Miyang 評論0 收藏0
  • 實現(xiàn)圖片懶加載(lazyload)

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

    renweihub 評論0 收藏0
  • 實現(xiàn)圖片懶加載(lazyload)

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

    Developer 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<