小程序 lazy-load 不生效的問(wèn)題

2020-09-28

導(dǎo)讀：最近在開(kāi)發(fā)家里喵喵的小程序（娛樂(lè)），本想抽一小部分時(shí)間做個(gè)懶加載?？戳诵〕绦蚬倬W(wǎng) API，給 image 標(biāo)簽加上 lazy-load 就能實(shí)現(xiàn)懶加載。但從微信開(kāi)發(fā)者工具看，似乎并沒(méi)有生效。搜...

最近在搭建家里喵喵的微信小程序（娛樂(lè)），本想抽一小部分時(shí)間做個(gè)懶加載。看了微信小程序官網(wǎng) API，給 image 標(biāo)簽加上 lazy-load 就能實(shí)現(xiàn)懶加載。但從微信搭建者工具看，似乎并沒(méi)有生效。搜了一下，很多小伙伴似乎都遇到了問(wèn)題，并沒(méi)有解決。

但經(jīng)過(guò)我的驗(yàn)證，懶加載確實(shí)是生效了。

只不過(guò)，微信小程序會(huì)提前加載當(dāng)前屏幕和下一屏的圖片，導(dǎo)致感知不到懶加載的存在。

個(gè)人認(rèn)為，這樣的懶加載比傳統(tǒng)懶加載的體驗(yàn)更加好。

我的驗(yàn)證過(guò)程：

驗(yàn)證過(guò)程

wxml部分（用 scroll-view 并且加上 bindload）：

<scroll-view class="container" scroll-y>  
  <view wx:for="{{list}}" class="list-item"> 
    <image class="list-img" lazy-load src="{{item.img}}" bindload='onLazyLoad'></image>
    <view>{{item.desc}}</view>
  </view>
</scroll-view>

js部分：

const app = getApp()  
Page({  
  data: {
    list: []
  },
  onLazyLoad(info) {
    console.log(info)
  }
})

最終效果

首屏輸出日志：

清空首屏輸出日志后，滑動(dòng)過(guò)程中輸出的日志：

整張頁(yè)面一共有 13 張圖。

因此，確實(shí)是進(jìn)行了懶加載。

魁拔喵喵喵

最后，介紹下我的微信小程序：魁拔喵喵喵（已經(jīng)能搜到啦）。功能目前比較簡(jiǎn)陋，歡迎交流和意見(jiàn)。

第二部分：如何開(kāi)通一個(gè)小商店

您可能感興趣: 小程序開(kāi)發(fā)

上一篇：微信小程序選取搜索地點(diǎn)并且顯示 下一篇：電商小程序如何推廣靠這些就可以爆紅！