微信小程式中，懶載入特效讓人頭疼不已，因為小程式完全沒法操作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~~