微信小程序实现图片懒加载_微信小程序加载图片

       在普通的web页面当中，我们都知道图片懒加载可以提升浏览器的加载速度。原理是图片用空或者占位图片进行显示，当屏幕移动到图片位置的时候，再把图片的地址换成它的地址。那么，在小程序当中呢，最近老大让看一下微信小程序的优化方面，图片是很吃资源的一项，所以我把矛头指向了懒加载：

       首先写代码之前一定要理清楚思路，我想的基础是懒加载的思路，首先设立一个数组都为false，让图片的高度和屏幕滚动的高度进行比较，当到达这个点的时候，数组里面对应的false变成true。当数组的false变成true的时候，我们让图片进行显示就可以啦。当然，首先我们需要判断一下首屏能容纳多少个图片，然后把他们显示出来。好，上代码：

wxml：

<view>
   <image wx:for="{{imgUrls}}" wx:key="item" src="{{arry[index] ? imgUrls[index].url: './../../img/index.gif'}}" class="{{arry[index] ?'Action':''}}"></image>
</view>

 wxss：

image {
    opacity: 0;
    width: 100%;
    height: 300px;
    transition: opacity 0.4s linear 0.4s;
}
   
.Action {
    opacity: 1;
}

js：

data: {
        damoHeight: '150',//demo高度
        imgUrls: [//图片地址
            {
                url: 'http://g.ydbcdn.com/site/imgs/1.png'
            }, {
                url: 'http://g.ydbcdn.com/site/imgs/2.png'
            },
            {
                url: 'http://g.ydbcdn.com/site/imgs/3.png'
            }, {
                url: 'http://g.ydbcdn.com/site/imgs/4.png'
            }
        ],
        arry: [false, false, false, false],
    },
 
    onPageScroll: function (res) {
        var _this = this;
        var str = parseInt(res.scrollTop / _this.data.damoHeight);
        _this.data.arry[str] = true;
        _this.setData({
          arry: _this.data.arry
        })
      },
 
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
        let _this = this;
        let num = Math.ceil(wx.getSystemInfoSync().windowHeight / 300);
        for (let i = 0; i < num; i++) {
            _this.data.arry[i] = true;
        };
        this.setData({
            arry: _this.data.arry
        })
    },