成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

Javascript圖片懶加載

qc1iu / 2979人閱讀

摘要：瀏覽器可視區(qū)域的高度即滾動條滾動的距離。需要手動調(diào)用一次方法，在頁面剛的時候?qū)⒁呀?jīng)在視窗內(nèi)的圖片加載出來。主題是懶加載嘛，后面有空了專門寫一篇函數(shù)節(jié)流方法的文章。

原理 
一開始將img標簽的src設(shè)置為一張默認圖片，將真實的圖片地址放在data-src上，監(jiān)聽滾動事件，當圖片進入可視區(qū)域時，寫入src真實的圖片地址。
如何判斷圖片進入了可視區(qū)域？


對于這樣一個頁面，圖片即將進入頁面的條件是：圖片距離整個網(wǎng)頁頂部的距離 < 瀏覽器可視區(qū)域的高度 + 滾動條滾動的距離。那么問題就可以分解成三個小點：

①圖片距離整個網(wǎng)頁頂部的距離；

可以通過下面這個方法獲取某個元素到網(wǎng)頁頂部的距離：

function getElementTop (element) {
  let actualTop = element.offsetTop;
  let parent = element.offsetParent;

  while (parent !== null) {
    actualTop += parent.offsetTop;
    parent = parent.offsetParent;
  }

  return actualTop;
}

代碼分析：
offsetTop表示的是元素距離父元素左上角頂點的高度，offsetParent則表示元素的父元素。通過不斷遍歷累加高度，就可以得到元素距離網(wǎng)頁頂部的距離。

②瀏覽器可視區(qū)域的高度；

即window.innerHeight

③滾動條滾動的距離。

即document.documentElement.scrollTop

懶加載如何實現(xiàn)？

html代碼如下：




    
    
    
    Document

這里只需要注意到開始時img標簽的src屬性放的是默認的圖片，真正的圖片地址放在了data-src中

css代碼如下：

.wrapper {
    text-align: center;
}

img {
    display: block;
    margin: 10px auto;
}

js代碼如下：

function lazyLoad () {
  let images = document.querySelectorAll("img");
  for(let i = 0; i < images.length; i++) {
    let image = images[i];
    if (getElementTop(image) <= window.innerHeight + document.documentElement.scrollTop) {
      image.src = image.getAttribute("data-src");
    }
  }
}

function getElementTop (element) {
  let actualTop = element.offsetTop;
  let parent = element.offsetParent;

  while (parent !== null) {
    actualTop += parent.offsetTop;
    parent = parent.offsetParent;
  }

  return actualTop;
}

lazyLoad()；

window.onscroll =lazyLoad；

代碼分析：
window.onscroll = lazyload表示在滾動條滾動時觸發(fā)調(diào)用lazyLoad方法；

在lazyLoad方法中，先通過document.querySelectorAll("img");找到所有的Image（這里只是為了簡化示例，實際場景中可以通過在需要懶加載的圖片上添加統(tǒng)一的類名，然后通過querySelectorAll(".類名")來獲取需要懶加載的圖片),依次判斷是否進入了可視區(qū)域內(nèi)。如果進入了可視區(qū)域則做img標簽的src的替換。

需要手動調(diào)用一次lazyLoad方法，在頁面剛load的時候?qū)⒁呀?jīng)在視窗內(nèi)的圖片加載出來。

函數(shù)節(jié)流

所謂的函數(shù)節(jié)流就是當事件觸發(fā)的頻率很高時，并不是每次都需要去調(diào)用相對應的處理函數(shù)，以此來提高性能。比如這里的滾動事件，假設(shè)我們希望至少間隔200ms才調(diào)用一次處理函數(shù)，那么可以新增一個方法

function throttle (delay, action) {
  let last = 0;
  return function () {
    let now = new Date();
    if (now - last > delay) {
      action();
      last = now;
    }
  }
}

然后將window.onscroll =lazyLoad；改成window.onscroll = throttle(200, lazyLoad)。這個函數(shù)在事件觸發(fā)時，先去判斷本次觸發(fā)的時間和上次觸發(fā)的時間的間隔，如果大于delay， 則運行處理函數(shù)。

函數(shù)用到了閉包的原理來保存last這個變量，對于閉包簡單的解釋一下就是throttle這個函數(shù)在調(diào)用結(jié)束后，本來應該銷毀掉其內(nèi)部的last變量，但是由于返回的是一個函數(shù)，返回的函數(shù)內(nèi)引用了last這個變量，因此last被一直保存在了內(nèi)存中。

throttle這個方法還有很多可以優(yōu)化的地方，不在這里展開了。主題是懶加載嘛，后面有空了專門寫一篇函數(shù)節(jié)流方法的文章。

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/51622.html

相關(guān)文章

  • 圖片的預加載和懶加載

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

    SwordFly 評論0 收藏0

  • Javascript圖片懶加載

    摘要：瀏覽器可視區(qū)域的高度即滾動條滾動的距離。需要手動調(diào)用一次方法，在頁面剛的時候?qū)⒁呀?jīng)在視窗內(nèi)的圖片加載出來。主題是懶加載嘛，后面有空了專門寫一篇函數(shù)節(jié)流方法的文章。 原理 一開始將img標簽的src設(shè)置為一張默認圖片，將真實的圖片地址放在data-src上，監(jiān)聽滾動事件，當圖片進入可視區(qū)域時，寫入src真實的圖片地址。 如何判斷圖片進入了可視區(qū)域？ showImg(https://seg...

    graf 評論0 收藏0

  • Javascript圖片懶加載

    摘要：瀏覽器可視區(qū)域的高度即滾動條滾動的距離。需要手動調(diào)用一次方法，在頁面剛的時候?qū)⒁呀?jīng)在視窗內(nèi)的圖片加載出來。主題是懶加載嘛，后面有空了專門寫一篇函數(shù)節(jié)流方法的文章。 原理 一開始將img標簽的src設(shè)置為一張默認圖片，將真實的圖片地址放在data-src上，監(jiān)聽滾動事件，當圖片進入可視區(qū)域時，寫入src真實的圖片地址。 如何判斷圖片進入了可視區(qū)域？ showImg(https://seg...

    Jason_Geng 評論0 收藏0

  • 實現(xiàn)一個圖片懶加載插件有多難？

    摘要：一個簡單的圖片懶加載共涉及兩個方面，約定我們首先需要給準備實施懶加載的元素添加指定的這里為同時將賦值給屬性。 源碼地址 插件完整版地址 m-lazyhttps://github.com/zhanyouwei... 歡迎一起交流 歡迎關(guān)注我的個人公眾號，不定期更新自己的工作心得。showImg(https://segmentfault.com/img/bVEk23?w=258&h=258...

    darkbug 評論0 收藏0

發(fā)表評論

0條評論

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