微信卡片流图片懒加载(监听所有图片)

图片懒加载

<image src='{ {item.img}}' class='banner' lazy-load="true" mode="aspectFill"/>

图片加了lazy-load 属性，就有主流lazyload的那种加载过程了

查看文档，image组件在 page 与 scroll-view 下，均会生效。为什么看起来像是没有生效？

lazy-load 实际实现的功能：小程序的lazy-load 不是通常认为的不在当前情况下展示的image标签不加载，

而是小程序提前加载当前屏幕和下一屏的图片，导致感知不到懒加载的存在。

也就是说该属性会提前加载下一屏的商品图片！但这样仍然要同一时间加载大量的图片

当然我们可以自己实现懒加载的方式加载图片

通过滚动监听每个图片高度值是否小于滚动条高度，从而改变数组里对应的isShow布尔值(如果该属性不存在也就是false,没有必要提前预加该属性，需要的时候再加)。

然后页面的image组件通过对src设置三目运算来判断是展示默认图片还是实际图片。