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

小小小發表於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，是不是又忘了關注~~』

相關文章