首页 > 代码库 > 真的炸了:让人头痛的小程序之『图片懒加载』终极解决方案

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

转载:请写明原文链接及作者名 ‘小小小’
小程序真的会取代一切?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,是不是又忘了关注~~』

<script type="text/javascript"> $(function () { $(‘pre.prettyprint code‘).each(function () { var lines = $(this).text().split(‘\n‘).length; var $numbering = $(‘
    ‘).addClass(‘pre-numbering‘).hide(); $(this).addClass(‘has-numbering‘).parent().append($numbering); for (i = 1; i <= lines; i++) { $numbering.append($(‘
  • ‘).text(i)); }; $numbering.fadeIn(1700); }); }); </script>

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