图片懒加载
<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设置三目运算来判断是展示默认图片还是实际图片。