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

轉載：請寫明掘金原文連接及做者名 '小小小' 第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，是否是又忘了關注~~』