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

資訊專欄INFORMATION COLUMN

懶加載方法總結(jié)

seal_de / 3133人閱讀

摘要：一傳統(tǒng)的懶加載有時(shí)一個(gè)頁面中有多個(gè)圖片或視頻要展示如果全部將資源加載顯示會(huì)導(dǎo)致頁面暫時(shí)空白用戶體驗(yàn)很不好要改變這種體驗(yàn)的一種思路是先用一個(gè)占位圖片顯示然后在可視窗口展示的內(nèi)容提前加載保證用戶看到的是已經(jīng)加載好的圖片等其他占用空間較大的資源例

一.傳統(tǒng)的懶加載

有時(shí)一個(gè)頁面中有多個(gè)圖片或視頻要展示,如果全部將資源加載顯示,會(huì)導(dǎo)致頁面暫時(shí)空白,用戶體驗(yàn)很不好,要改變這種體驗(yàn)的一種思路是先用一個(gè)占位圖片顯示,然后在可視窗口展示的內(nèi)容提前加載,保證用戶看到的是已經(jīng)加載好的圖片等其他占用空間較大的資源.
例如:

//css代碼:
div image[alt^="picture"] {
    width: 100px;
    height: 100px;
    background: silver;
  }

.img {
   height: 200px;
   width: 400px;
  }
//html代碼


  picture1
  picture2
  picture3
  picture4
  picture5
  picture6


//js代碼
var imgArr = document.getElementsByClassName("img");
  var imgHeight = imgArr[0].style.height;
  var clientHeight = document.documentElement.clientHeight;//獲取網(wǎng)頁可見區(qū)域高度
  window.onscroll = function() {
    var scrollTop = document.documentElement.scrollTop;//網(wǎng)頁垂直方向滾動(dòng)的高度
    for (let i = 0; i < imgArr.length; i++) {
      var offset = imgArr[i].offsetTop;//獲取當(dāng)前對(duì)象到其上級(jí)層頂部的距離
      var topT = scrollTop - ("200" + offset);
      var topB = scrollTop + clientHeight - offset;
      if (topT < 0 && topB > 0) {
        imgArr[i].src = imgArr[i].getAttribute("data-src");
      } else {
        imgArr[i].src = "./time.gif";
      }
    }
  }

頁面剛開始如下圖所示,


當(dāng)滾動(dòng)鼠標(biāo)時(shí),圖片陸續(xù)顯示

二.微信小程序中的懶加載

微信小程序是監(jiān)聽目標(biāo)節(jié)點(diǎn)和參照區(qū)域相交的狀態(tài)來實(shí)現(xiàn)懶加載

//wxml代碼:

    懶加載示例
    
        
        
         {{item.title}}
    

//js代碼:
Page({
  data: {
    imgArr: [{
        title: "picture1",
        src: "../../images/timg.gif",
        realSrc: "../../images/1.jpg"
      },
      {
        title: "picture2",
        src: "../../images/timg.gif",
        realSrc: "../../images/2.jpg"
      },
      {
        title: "picture3",
        src: "../../images/timg.gif",
        realSrc: "../../images/3.jpg"
      }, {
        title: "picture4",
        src: "../../images/timg.gif",
        realSrc: "../../images/4.jpg"
      }
    ]
  },
  onLoad(options) {
    var _self = this;
    var obs = wx.createIntersectionObserver(this, { observeAll: true });
    obs.relativeToViewport({ bottom: 100 }).observe(".img", function(res) {
      _self.data.imgArr.forEach(function(item) {
        if (res.dataset.src == item.realSrc) {
          if (res.intersectionRatio > 0) {
            item.src = res.dataset.src;
          } else {
            item.src = "../../images/timg.gif";
          }
          _self.setData({ imgArr: _self.data.imgArr });
        }
      })
    })
  },
})

如圖所示:

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

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

相關(guān)文章

  • 懶加載方法總結(jié)

    摘要：一傳統(tǒng)的懶加載有時(shí)一個(gè)頁面中有多個(gè)圖片或視頻要展示如果全部將資源加載顯示會(huì)導(dǎo)致頁面暫時(shí)空白用戶體驗(yàn)很不好要改變這種體驗(yàn)的一種思路是先用一個(gè)占位圖片顯示然后在可視窗口展示的內(nèi)容提前加載保證用戶看到的是已經(jīng)加載好的圖片等其他占用空間較大的資源例 一.傳統(tǒng)的懶加載 有時(shí)一個(gè)頁面中有多個(gè)圖片或視頻要展示,如果全部將資源加載顯示,會(huì)導(dǎo)致頁面暫時(shí)空白,用戶體驗(yàn)很不好,要改變這種體驗(yàn)的一種思路是先用...

    beita 評(píng)論0 收藏0

  • 使用Webpack的代碼分離實(shí)現(xiàn)Vue懶加載（譯文）

    摘要：當(dāng)一個(gè)的項(xiàng)目體積變得十分龐大的時(shí)候，使用的代碼分離功能將，或的代碼進(jìn)行分離并按需加載，會(huì)極大的提高的首屏加載速度。如果我們使用函數(shù)在中返回模塊作為載荷，就實(shí)現(xiàn)了懶加載。 當(dāng)一個(gè)Vue的項(xiàng)目體積變得十分龐大的時(shí)候，使用Webpack的代碼分離功能將Vue Components，routes或Vuex的代碼進(jìn)行分離并按需加載，會(huì)極大的提高App的首屏加載速度。 showImg(https:...

    SmallBoyO 評(píng)論0 收藏0

  • Laravel Eloquent中的 懶加載VS即時(shí)加載

    摘要：在本文中，我們將了解中的懶加載和即時(shí)加載以及它如何在后臺(tái)運(yùn)行?，F(xiàn)在所有的房屋數(shù)據(jù)和在關(guān)系表中的數(shù)據(jù)都同時(shí)加載出來了，查詢的語句的是使用即時(shí)加載時(shí)僅執(zhí)行個(gè)查詢?？偨Y(jié)現(xiàn)在你理解了這個(gè)過程，希望它能幫助你理解懶加載和即時(shí)加載的用法和基本原理。 Laravel中的Eloquent(ORM)的工作方式很令人驚訝，并提供訪問數(shù)據(jù)庫的非常簡(jiǎn)單的方法。在本文中，我們將了解Laravel Eloquen...

    Keven 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<