真的炸了：让人头痛的小程序之『图片懒加载』终极解决方案

拼搏现实的明天。 2022-07-14 15:26 229阅读 0赞

转载：请写明原文链接及作者名 ‘小小小’  
小程序真的会取代一切？QQ群：139128168 ← 点击加群

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

先看特效：

![图片懒加载][465490074ca467b67086.gif]

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

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

先看一张图：

![图片位置高度][d9e0775fba8706c31a55.png]

通过上图可以知道，图片位置高度其实可以通过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）替换默认图片 ####

先看效果图片：

![替换默认图片][1792ded6f38877e0b71f.png]

wxml代码：

*  思路很明显，一开始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）懒加载中渐显特效 ####

先看效果：

![渐渐显示特效][eb399b833c86ed447147.gif]

wxss代码：

.product_image{ opacity: 0; width: 100%; height: 70%; transition: opacity 1s linear 2s; }
    .loaded{ opacity: 1; }

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

[源码下载][Link 1]

『咻咻咻咻duang，是不是又忘了关注~~』

[465490074ca467b67086.gif]: https://dn-mhke0kuv.qbox.me/465490074ca467b67086.gif
[d9e0775fba8706c31a55.png]: https://dn-mhke0kuv.qbox.me/d9e0775fba8706c31a55.png
[1792ded6f38877e0b71f.png]: https://dn-mhke0kuv.qbox.me/1792ded6f38877e0b71f.png
[eb399b833c86ed447147.gif]: https://dn-mhke0kuv.qbox.me/eb399b833c86ed447147.gif
[Link 1]: https://github.com/didiaohu/xiaoxiaoxiao/tree/master/lazyload