小程序 lazy-load 不生效的問題
2020-09-28
導讀：最近在開發家里喵喵的小程序（娛樂），本想抽一小部分時間做個懶加載。看了小程序官網 API，給 image 標簽加上 lazy-load 就能實現懶加載。但從微信開發者工具看，似乎并沒有生效。搜...
最近在搭建家里喵喵的微信小程序（娛樂），本想抽一小部分時間做個懶加載。看了微信小程序官網 API，給 image 標簽加上 lazy-load 就能實現懶加載。但從微信搭建者工具看，似乎并沒有生效。搜了一下，很多小伙伴似乎都遇到了問題，并沒有解決。
但經過我的驗證， 懶加載確實是生效了 。
只不過， 微信小程序會提前加載當前屏幕和下一屏的圖片，導致感知不到懶加載的存在。
個人認為，這樣的懶加載比傳統懶加載的體驗更加好。
我的驗證過程：
驗證過程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)
}
})
最終效果
首屏輸出日志：
魁拔喵喵喵
清空首屏輸出日志后，滑動過程中輸出的日志：
整張頁面一共有 13 張圖。
因此，確實是進行了懶加載。
最后，介紹下我的微信小程序：魁拔喵喵喵（已經能搜到啦）。功能目前比較簡陋，歡迎交流和意見。
第二部分：如何開通一個小商店
您可能感興趣: 小程序開發
上一篇：微信小程序選取搜索地點并且顯示
下一篇：電商小程序如何推廣靠這些就可以爆紅！
- 關注官方公眾號 -
咨詢電話：4006-089-731