微信小程式實現圖片懶載入的懶辦法(思路參考)
微信小程式中,由於沒有辦法實現DEMO操作,位置的操作在小程式中很難進行,所以要實現圖片的懶載入是真的難啊(簡直操碎了心~~)!!!
懶載入的實現無非就那幾個辦法,說白了就是按需載入、監聽滾動條載入、延時載入。。。
說明:此方法只適用於有明確統一高度的圖片排列!
不說那麼多了,直接上方法了
首先,我們在本地先放上一張圖片(index.png),然後我們再來看張圖片~~嚶嚶嚶
圖中每個模組的高度應該是Demo的高度=圖片的高度+文字描述內容節點高度+maigin-bottom
知道高度的計算之後就好辦了
微信小程式Page中的onPageScroll方法直接提供了監聽頁面滑動距離的方法(這就很舒服)
page({
data:{
damoHeight: '100',//demo高度
},
onPageScroll: function (res) {
console.log(res.scrollTop);
}
})
由此得到頁面的滾動距離。不過這個方法在WEB開發工具中不是很好用,在用滑鼠滾輪滾動的過程中,這個方法的觸發感覺不是很靈敏,不曉得是不是個別原因。還有,就是如果在這個方法中寫一些精密的判斷話,儘量少寫一點,畢竟頁面滑動的時候,會一直觸發這個方法,難保不會出錯。
知道了demo的高度,頁面的滾動距離之後,剩下的就是資料的渲染了
把後臺返回的圖片地址賦值到一個全域性陣列變數中,並且同時建立一個長度和此陣列一樣的陣列,裡面全放上false,備用
page({
data:{
damoHeight: '100',//demo高度
imgUrls: [//圖片地址
{
url: 'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg'
}, {
url: 'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg'
}
],
arry:[false,false],
},
onPageScroll: function (res) {
console.log(res.scrollTop);
}
})
wxml中這樣寫
<image src="{{arry[index] ? imgUrls[index].url: 'index.png'}}"></image>
用本地的圖片形成一個佔位符效果,然後由arry中對應下標的false和true來控制image 標籤的路徑是本地的還是imgUrls中的,然後在onPageScroll中,用螢幕滑動的距離/Demo的高度,在取整,得到的整數就是arry中需要變成true的下標
page({
data:{
damoHeight: '100',//demo高度
imgUrls: [//圖片地址
{
url: 'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg'
}, {
url: 'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg'
}
],
arry:[false,false],
},
onPageScroll: function (res) {
var _this = this;
//console.log(res.scrollTop);
var str = parseInt(res.scrollTop / _this.data.damoHeight);
_this.data.arry[str] = true;
_this.setData({
arry:_this.data.arry
})
}
})
搞定,其實也不是什麼很複雜的東西,這就是一種另類一點的實現方式罷了,當然裡面的一些高度的判斷,螢幕的滾動距離還是需要自己去計算滴。。。至於照片的顯示動畫就自己加上去就好,我的話就這樣寫
image{
opacity: 0;
width: 100%;
height: 70%;
transition: opacity 1s linear 2s;
}
.Action{
opacity: 1;
}
簡單的淡入淡出,好了,打完收工,不扯淡了,繼續填坑去。。。