小程序之『图片懒加载』终极解决方案

微信小程序中，懒加载特效让人头疼不已，因为小程序完全没法操作dom，所以位置的操作在小程序中，变得极其的难~~

先看特效：



我们将其拆分为如下几个步骤进行讲解~~

1）如何获取图片的位置高度

先看一张图：



通过上图可以知道，图片位置高度其实可以通过img.height + margin值算出。

js代码：

1.

arrHight[i] = Math.floor(i/

2

)*(img.height + margin-bottom);

为何是Math.floor(i/2)呢，因为同一排两张图片高度一样，比如i=0和i=1，通过Math.floor得出值都为0，所以可以保证同一排的两张图片位置高度是同一个值。

2）替换默认图片

先看效果图片：



wxml代码：

1.

<image src=

"{{arr[index] ? productArr[index].Image : 'default.jpg'}}"

></image>

思路很明显，一开始arr[index]中都是false，所以默认都是default图片

但是随着往下移动，有些arr[index]的值变为true，所以替换默认图片

js代码：

1.

for

 

(var i = 

0

; i < 

this

.data.productArr.length; i++) {

2.

if

 

(arrHight[i] < scrollTop) {

3.

if

 

(arr[i] == 

false

) {

4.

arr[i] = 

true

;

5.

}

6.

}

7.

}

思路相当清晰，无需多言~~

3）懒加载中渐显特效

先看效果：



wxss代码：

01.

.product_image{

02.

opacity: 

0

;

03.

width: 

100

%;

04.

height: 

70

%;

05.

transition: opacity 1s linear 2s;

06.

}

07.

.loaded{

08.

opacity: 

1

;

09.

}

其实就是opacity的一个过渡动画而已，so easy~~

源码下载