image 懶加載不生效
查看文檔,只要image組件在 page 與 scroll-view 下,均會生效。
image.png
所有的注冊頁面講道理都在page 之下,注意這個是注冊頁面,而不是組件等。不過通常情況下組件也會在頁面上被使用,里面的image自然也會在page之下。
為什么看起來像是沒有生效?
這里就要解釋一下lazy-load 實際實現的功能了,小程序的lazy-load 不是通常認為的不在當前情況下展示的image標簽不加載,而是小程序提前加載當前屏幕和下一屏的圖片,導致感知不到懶加載的存在。
怎么驗證懶加載
因為微信開發者工具不能通過調試工具顯示image加載情況,所以我們利用 bindload 事件【image加載后觸發本事件】
<image wx:for="{{imageList}}" src="{{item}}" lazy-load="{{true}}" bindload="outputSrc" data-src="{{item}}"/>
outputSrc(e) {
// 只需查看本事件觸發即可知道image 的加載情況
console.log(e.currentTarget.dataset.src)
}