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

資訊專欄INFORMATION COLUMN

圖片懶加載js實現(xiàn)

Pines_Cheng / 2858人閱讀

摘要:懶加載原理懶加載實現(xiàn)原理很簡單通過在標簽中設(shè)置一個自定義屬性在元素出現(xiàn)在可視區(qū)域時替換默認的加載圖片來達到效果實現(xiàn)代碼定時器延遲后加載圖片獲取可視窗口高度獲取圖片離可視區(qū)域頂部的距離打印替換先加載圖片避免獲取的標簽屬性不正確

1.懶加載原理

懶加載實現(xiàn)原理很簡單,通過在img標簽中設(shè)置一個H5自定義屬性,在元素出現(xiàn)在可視區(qū)域時,替換默認的加載圖片來達到效果

2.實現(xiàn)代碼
// 定時器,300ms延遲后加載圖片
let timer = null;
let loadingImgUrl =
  "https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1545210653&di=173f4d639097ddf9e69ed23cd0da47f9&src=http://img.mp.sohu.com/upload/20170720/cd59c28a4c6d49bc8b4ecfcdffbc04f1_th.png";
let loadingHeight = 0;
let n = 0;

function lazyload() {
  let imgs = document.getElementById("root").getElementsByTagName("img");
  // 獲取可視窗口高度
  let viewHeight = document.documentElement.clientHeight;
  for (let i = 0; i < imgs.length; i++) {
    let img = imgs[i];
    // 獲取圖片離可視區(qū)域頂部的距離
    let top = img.getBoundingClientRect().top;
    if("false" == img.dataset.isLoaded && ((0 <= top && top <= viewHeight) || (top <= 0 && Math.abs(top) <= loadingHeight))) {
      // 打印1,2,...,9,10
      console.log(++n);
      // 替換src
      img.src = img.dataset.src;
      img.dataset.isLoaded = true;
    }
  }
}

let image = new Image();
image.src = loadingImgUrl;

// 先加載loading圖片,避免獲取的img標簽top屬性不正確
image.onload = function () {
  loadingHeight = image.height;
  lazyload();
}

window.addEventListener("scroll", function () {
  clearTimeout(timer);
  timer = setTimeout(function () {
    lazyload();
  }, 300);
})

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

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

相關(guān)文章

  • 圖片的預(yù)加載加載

    摘要:圖片的預(yù)加載是提升用戶體驗而損失性能的一種做法,而懶加載的性能就比較好了,所以將兩個結(jié)合起來放到程序中是一種不錯的選擇。 最近在做H5滑頁時,遇到一些比較大的場景,動輒二十、三十頁,而圖片更是可恨的能達到上百個,所以就會導(dǎo)致場景在加載的時候遇到網(wǎng)速比較慢的時候,用戶等待的時間特別長,這樣的話,就有可能導(dǎo)致一部分的用戶沒有耐心,而丟失這部分用戶,于是就有了這里的圖片的預(yù)加載和懶加載,記個...

    SwordFly 評論0 收藏0
  • 原生JS實現(xiàn)最簡單的圖片加載

    摘要:原文地址原生實現(xiàn)最簡單的圖片懶加載歡迎。什么時候用懶加載當(dāng)頁面中需要一次性載入很多圖片的時候,往往都是需要用懶加載的。屬性是一個必需的屬性,它規(guī)定在圖像無法顯示時的替代文本。假設(shè)來表示圖片到可視區(qū)域頂部距離并設(shè)來表示可視區(qū)域的高度。 原文地址:原生JS實現(xiàn)最簡單的圖片懶加載 歡迎star。 如果有錯誤的地方歡迎指正。 Demo地址:http://axuebin.com/lazyloa...

    villainhr 評論0 收藏0
  • 加載和預(yù)加載

    摘要:使用默認是對象,如果是是指使用標簽,可以跨域,三懶加載和預(yù)加載的對比兩者都是提高頁面性能有效的辦法,兩者主要區(qū)別是一個是提前加載,一個是遲緩甚至不加載。懶加載對服務(wù)器前端有一定的緩解壓力作用,預(yù)加載則會增加服務(wù)器前端壓力。 一、懶加載 1.什么是懶加載 showImg(https://segmentfault.com/img/remote/1460000016666819); 懶加載也...

    appetizerio 評論0 收藏0
  • 加載和預(yù)加載

    摘要:使用默認是對象,如果是是指使用標簽,可以跨域,三懶加載和預(yù)加載的對比兩者都是提高頁面性能有效的辦法,兩者主要區(qū)別是一個是提前加載,一個是遲緩甚至不加載。懶加載對服務(wù)器前端有一定的緩解壓力作用,預(yù)加載則會增加服務(wù)器前端壓力。 一、懶加載 1.什么是懶加載 showImg(https://segmentfault.com/img/remote/1460000016666819); 懶加載也...

    Shonim 評論0 收藏0
  • 加載和預(yù)加載

    摘要:使用默認是對象,如果是是指使用標簽,可以跨域,三懶加載和預(yù)加載的對比兩者都是提高頁面性能有效的辦法,兩者主要區(qū)別是一個是提前加載,一個是遲緩甚至不加載。懶加載對服務(wù)器前端有一定的緩解壓力作用,預(yù)加載則會增加服務(wù)器前端壓力。 一、懶加載 1.什么是懶加載 showImg(https://segmentfault.com/img/remote/1460000016666819); 懶加載也...

    hedzr 評論0 收藏0

發(fā)表評論

0條評論

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