真的炸了:讓人頭痛的小程式之『圖片懶載入』終極解決方案

小小小發表於2016-12-14

轉載:請寫明掘金原文連結及作者名 '小小小' 第250名入群者,獎書一本 QQ群:139128168 ← 點選加群

微信小程式中,懶載入特效讓人頭疼不已,因為小程式完全沒法操作dom,所以位置的操作在小程式中,變得極其的難~~

先看特效:

圖片懶載入

我們將其拆分為如下幾個步驟進行講解~~

1)如何獲取圖片的位置高度

先看一張圖:

圖片位置高度

通過上圖可以知道,圖片位置高度其實可以通過img.height + margin值算出。

js程式碼:

arrHight[i] = Math.floor(i/2)*(img.height + margin-bottom);
複製程式碼

為何是Math.floor(i/2)呢,因為同一排兩張圖片高度一樣,比如i=0和i=1,通過Math.floor得出值都為0,所以可以保證同一排的兩張圖片位置高度是同一個值。

2)替換預設圖片

先看效果圖片:

替換預設圖片

wxml程式碼:

<image src="{{arr[index] ? productArr[index].Image : 'default.jpg'}}"></image>
複製程式碼
  • 思路很明顯,一開始arr[index]中都是false,所以預設都是default圖片
  • 但是隨著往下移動,有些arr[index]的值變為true,所以替換預設圖片

js程式碼:

for (var i = 0; i < this.data.productArr.length; i++) {
  if (arrHight[i] < scrollTop) {
      if (arr[i] == false) {
          arr[i] = true;
      }
  }
}
複製程式碼

思路相當清晰,無需多言~~

3)懶載入中漸顯特效

先看效果:

漸漸顯示特效

wxss程式碼:

.product_image{
  opacity: 0;
  width: 100%;
  height: 70%;
  transition: opacity 1s linear 2s;
}
.loaded{
    opacity: 1;
}
複製程式碼

其實就是opacity的一個過渡動畫而已,so easy~~


原始碼下載

『咻咻咻咻duang,是不是又忘了關注~~』

相關文章