小程序 lazy-load 不生效的问题

骑猪看日落 2023-06-03 04:52 17阅读 0赞

最近在开发家里喵喵的[小程序][Link 1]（娱乐），本想抽一小部分时间做个懒加载。看了小程序官网 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) } })

## 最终效果 ##

首屏输出日志：

[![www-wxapp-union-com_data_attachment_portal_201809_21_100519g9ty3bx3tahd9j4x.png][]][www-wxapp-union-com_data_attachment_portal_201809_21_100519g9ty3bx3tahd9j4x.png 1]

清空首屏输出日志后，滑动过程中输出的日志：

[![www-wxapp-union-com_data_attachment_portal_201809_21_100516u78eof7fl7e11f1z.png][]][www-wxapp-union-com_data_attachment_portal_201809_21_100516u78eof7fl7e11f1z.png 1]

更多专业前端知识，请上 **【猿2048】www.mk2048.com**

[Link 1]: http://www.wxapp-union.com/
[www-wxapp-union-com_data_attachment_portal_201809_21_100519g9ty3bx3tahd9j4x.png]: https://mk2048.oss-cn-beijing.aliyuncs.com/web_upload/blog_imgs/50/www-wxapp-union-com_data_attachment_portal_201809_21_100519g9ty3bx3tahd9j4x.png
[www-wxapp-union-com_data_attachment_portal_201809_21_100519g9ty3bx3tahd9j4x.png 1]: http://www.wxapp-union.com/data/attachment/portal/201809/21/100519g9ty3bx3tahd9j4x.png
[www-wxapp-union-com_data_attachment_portal_201809_21_100516u78eof7fl7e11f1z.png]: https://mk2048.oss-cn-beijing.aliyuncs.com/web_upload/blog_imgs/50/www-wxapp-union-com_data_attachment_portal_201809_21_100516u78eof7fl7e11f1z.png
[www-wxapp-union-com_data_attachment_portal_201809_21_100516u78eof7fl7e11f1z.png 1]: http://www.wxapp-union.com/data/attachment/portal/201809/21/100516u78eof7fl7e11f1z.png