原生JS實現圖片懶加載(lazyload)

qianfeng 發布于2019-08-21 11:45 / 2344人閱讀

摘要：前言圖片懶加載也是比較常見的一種性能優化的方法，最近在用做一個新聞列表的客戶端時也用到了，這里就簡單介紹下實現原理和部分代碼。，當前圖片距離頂部的距離。

前言

?圖片懶加載也是比較常見的一種性能優化的方法，最近在用vue做一個新聞列表的客戶端時也用到了，這里就簡單介紹下實現原理和部分代碼。

實現原理

?加載頁面的時候，圖片一直都是流量大頭，針對圖片的性能方法也挺多的比如base64、雪碧圖等；懶加載也是其中一種，主要原理是將非首屏的圖片src設為一個默認值，然后監聽窗口滾動，當圖片出現在視窗中時再給他賦予真實的圖片地址，這樣可以保證首屏的加載速度然后按需加載圖片。

具體代碼

?首先在渲染時，圖片引用默認圖片，然后把真實地址放在data-*屬性上面。

?然后是監聽滾動，直接用window.onscroll就可以了，但是要注意一點的是類似于window的scroll和resize，還有mousemove這類觸發很頻繁的事件，最好用節流(throttle)或防抖函數(debounce)來控制一下觸發頻率。underscore和lodash里面都有封裝這兩個方法，這里先不多做介紹了。

?接著要判斷圖片是否出現在了視窗里面，主要是三個高度：1，當前body從頂部滾動了多少距離。2，視窗的高度。3，當前圖片距離頂部的距離。offsetTop相關屬性可以參考這里，具體代碼如下：

window.onscroll =_.throttle(this.watchscroll, 200);
watchscroll () {

  var bodyScrollHeight =  document.body.scrollTop;// body滾動高度
  var windowHeight = window.innerHeight;// 視窗高度
  var imgs = document.getElementsByClassName("lazyloadimg");
  for (var i =0; i < imgs.length; i++) {
    var imgHeight = imgs[i].offsetTop;// 圖片距離頂部高度  
    if (imgHeight  < windowHeight  + bodyScrollHeight) {
       imgs[i].src = imgs[i].getAttribute("data-src");
       img[i].className = img[i].className.replace("lazyloadimg","")
    }
  }
}

結語

?大概內容就這么多了，下次可能會補充一下防抖節流源碼的實現。最后再補充兩個常見的滾動判斷：
1.頁面滾動離開首屏(這時可顯示回到頂部的按鈕):document.body.scrollTop > window.innerHeight
2.頁面滾動到底部了(這時可去調接口獲取更多內容)：window.scrollY + window.innerHeight > document.body.offsetHeight

云服務器 GPU云服務器 js實現數據的懶加載圖片 js圖片懶加載 js實現圖片預加載 ionic js懶加載數據

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

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

原生JS實現圖片懶加載(lazyload)

摘要：前言圖片懶加載也是比較常見的一種性能優化的方法，最近在用做一個新聞列表的客戶端時也用到了，這里就簡單介紹下實現原理和部分代碼。，當前圖片距離頂部的距離。前言 ?圖片懶加載也是比較常見的一種性能優化的方法，最近在用vue做一個新聞列表的客戶端時也用到了，這里就簡單介紹下實現原理和部分代碼。實現原理 ?加載頁面的時候，圖片一直都是流量大頭，針對圖片的性能方法也挺多的比如base64、...

MangoGoing 2019-08-01 16:58 評論0 收藏0
原生實現img-lazyLoad:圖片延遲加載（基于intersection Observer）

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

shuibo 2019-08-23 15:05 評論0 收藏0
原生JS實現最簡單的圖片懶加載

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

villainhr 2019-08-21 12:01 評論0 收藏0
Chrome 75 將原生支持圖片的惰性加載

摘要：今天給大家帶來好消息是，將原生支持圖片的惰性加載，支持對和進行延遲加載，只需要將屬性設置為即可。該屬性支持標簽，無論標簽是否含有屬性及被標簽包裹，以及標簽。隨著瀏覽器性能的提升，前端也越來越關注用戶體驗，而影響用戶體驗其中一個很重要的指標便是受首屏渲染速度。我們常常會針對樣式、腳本、圖片、音頻、視頻等資源做處理，比如針對樣式和腳本的壓縮合并，將圖片合并成雪碧圖、將小圖轉化成base6...

luckyw 2019-08-23 16:54 評論0 收藏0