image 懶加載不生效

查看文檔，只要image組件在 page 與 scroll-view 下，均會(huì)生效。

image.png

所有的注冊(cè)頁(yè)面講道理都在page 之下，注意這個(gè)是注冊(cè)頁(yè)面，而不是組件等。不過(guò)通常情況下組件也會(huì)在頁(yè)面上被使用，里面的image自然也會(huì)在page之下。

為什么看起來(lái)像是沒(méi)有生效？

這里就要解釋一下lazy-load 實(shí)際實(shí)現(xiàn)的功能了，小程序的lazy-load 不是通常認(rèn)為的不在當(dāng)前情況下展示的image標(biāo)簽不加載，而是小程序提前加載當(dāng)前屏幕和下一屏的圖片，導(dǎo)致感知不到懶加載的存在。

怎么驗(yàn)證懶加載

因?yàn)槲⑿砰_發(fā)者工具不能通過(guò)調(diào)試工具顯示image加載情況，所以我們利用 bindload 事件【image加載后觸發(fā)本事件】

<image wx:for="{{imageList}}" src="{{item}}" lazy-load="{{true}}" bindload="outputSrc"  data-src="{{item}}"/>

outputSrc(e) {
  // 只需查看本事件觸發(fā)即可知道image 的加載情況
   console.log(e.currentTarget.dataset.src)
}