小程序 懒加载图片

<view class="image">
                    <image src="{{arry[index] ? val.thumbnail: 'https://cdn.kuso.xyz/dailyTest/img/lazy.png'}}" class="{{arry[index] ?'Action':''}}"></image>
</view>
                
Action {
  opacity: 1;
}

image{
	opacity: 0;
    transition: opacity 0.2s linear 0.2s;
}
data: {
	arry: [], //是否显示图片
	heihgt: 0, //屏幕高度
}
onLoad: function(options) {
        var that = this;
        that.imgLazy(1)   1为：初始化arry除了屏幕可见的元素 其他为false
        wx.getSystemInfo({
            success: res => {
                that.setData({
                    height: res.windowHeight, 
                })
            }
        })
},
onPageScroll: function(res) {
        let that = this;
        that.imgLazy()
    },
imgLazy: function(type) { //懒加载
        let that = this;
        wx.createSelectorQuery().selectAll('.list').boundingClientRect((ret) => {
            ret.forEach((item, index) => {
                if (item.top <= that.data.height) that.data.arry[index] = true;
                else if (type) that.data.arry[index] = false;
            })
            that.setData({
                arry: that.data.arry
            })
        }).exec()
    },