深蓝互联专注深圳小程序开发、微网站、O2O系统、APP开发和深圳网站建设欢迎咨询邮箱:wisepu@szdbi.com   电话:13530005652   联系我们   |   网站地图   



微信小程序的图片懒加载

来源:     发布:     点击:

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

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

.wxml:

1
2
3
4
<!--pages/test/test.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:

 

1
2
3
4
5
6
7
8
9
10
11
12
/* pages/test/test.wxss */
 
image {
  opacity: 0;
  width: 100%;
  height: 300px;
  transition: opacity 0.4s linear 0.4s;
}
 
.Action {
  opacity: 1;
}

  .js:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
Page({
  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: [falsefalsefalsefalse],
 
  },
  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 () {
    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
    })
  }
})

相关文章

无相关信息


深圳市龙华新区龙观西路2号宝龙大厦A903(与布龙路交汇处)