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

資訊專欄INFORMATION COLUMN

Javascript圖片懶加載

graf / 734人閱讀

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

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


對于這樣一個頁面，圖片即將進(jìn)入頁面的條件是：圖片距離整個網(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標(biāo)簽的src屬性放的是默認(rèn)的圖片，真正的圖片地址放在了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(".類名")來獲取需要懶加載的圖片),依次判斷是否進(jìn)入了可視區(qū)域內(nèi)。如果進(jìn)入了可視區(qū)域則做img標(biāo)簽的src的替換。

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

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

所謂的函數(shù)節(jié)流就是當(dāng)事件觸發(fā)的頻率很高時，并不是每次都需要去調(diào)用相對應(yīng)的處理函數(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é)束后，本來應(yīng)該銷毀掉其內(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/112917.html

相關(guān)文章

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

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

    SwordFly 評論0 收藏0

  • Javascript圖片懶加載

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

    qc1iu 評論0 收藏0

  • Javascript圖片懶加載

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

    Jason_Geng 評論0 收藏0

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

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

    darkbug 評論0 收藏0

發(fā)表評論

0條評論

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