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

資訊專欄INFORMATION COLUMN

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

MangoGoing / 911人閱讀

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

前言

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

實現(xiàn)原理

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

具體代碼

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

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

?接著要判斷圖片是否出現(xiàn)在了視窗里面，主要是三個高度：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","")
    }
  }
}

結語

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

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

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

相關文章

  • 原生JS實現(xiàn)圖片懶加載(lazyload)

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

    qianfeng 評論0 收藏0

  • 原生實現(xiàn)img-lazyLoad:圖片延遲加載（基于intersection Observer）

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

    shuibo 評論0 收藏0

  • 原生JS實現(xiàn)最簡單的圖片懶加載

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

    villainhr 評論0 收藏0

  • Chrome 75 將原生支持圖片的惰性加載

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

    luckyw 評論0 收藏0

發(fā)表評論

0條評論

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