国产精品人妻熟女a8198v久,国产成人亚洲精品青草,精品国产一区二区三区国产区

微信小程序的圖片懶加載

發(fā)布者：深藍互聯(lián)

發(fā)布時間：2019-08-26

點擊：次

在普通的web頁面當中，我們都知道圖片懶加載可以提升瀏覽器的加載速度。原理是圖片用空或者占位圖片進行顯示，當屏幕移動到圖片位置的時候，再把圖片的地址換成它的地址。那么，在小程序當中呢，最近老大讓看一下微信小程序的優(yōu)化方面，圖片是很吃資源的一項，所以我把矛頭指向了懶加載：

首先寫代碼之前一定要理清楚思路，我想的基礎是懶加載的思路，首先設立一個數(shù)組都為false，讓圖片的高度和屏幕滾動的高度進行比較，當?shù)竭_這個點的時候，數(shù)組里面對應的false變成true。當數(shù)組的false變成true的時候，我們讓圖片進行顯示就可以啦。當然，首先我們需要判斷一下首屏能容納多少個圖片，然后把他們顯示出來。好，上代碼：

.wxml:

1
2
3
4 
<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: [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 () {
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
})
}
})

上一篇：App開發(fā)的新趨勢

下一篇：微信小程序-閱讀小程序demo

返回列表

无码人妻精一区二区三区,eeuss影院www在线观看,无码精品久久久久久人妻中字,日韩av高清在线看片

13530005652