为灵沐小程序增加图片懒加载功能适用壁纸功能

Hellllllllllllllllllo.小伙伴

事情的起因是某天夜里收到n个监控提醒，接入这个壁纸小程序的api流量异常，然后看了看，发现是每有一个用户访问，便增加大量的资源损耗。

按理说一个壁纸小程序不应该没有懒加载功能，可偏偏灵沐就没有。让我们在这个帖子下面一起骂骂他，灵沐作者脑抽。

下图为懒加载效果演示图

本次实现方法较为简单，只需要增加一个组件即可。

1.下载下方组件源码

2.在灵沐的根目录中找到components文件夹，将下载的组件解压到这个文件夹。

3.注册组件：找到所需要懒加载的页面json文件，增加以下引用。

"MOImg": "../../components/MOImg/index"
"MOImg": "../../components/MOImg/index"
"MOImg": "../../components/MOImg/index"

要注意的是与上行代码要有一个逗号“,”分隔。代码结束不需要“,”。

灵沐小程序要在以下文件中增加

/pages/lists/lists.json
/pages/index/index.json
/pages/lists/lists.json
/pages/index/index.json
/pages/lists/lists.json
/pages/index/index.json

4.调用代码：在根目录中找到模板文件template/common-list.wxml文件

在将第八行的image标签替换成懒加载标签MOImg，如下所示。

 <MOImg class="fengrui-img" wx:if="{{item.attributes.cover != null}}" src="{{item.attributes.cover}}" mode="aspectFill" />
          <MOImg class="fengrui-img" wx:else="" src="../../images/Images-rafiki.svg" mode="aspectFit" />
 <MOImg class="fengrui-img" wx:if="{{item.attributes.cover != null}}" src="{{item.attributes.cover}}" mode="aspectFill" />
          <MOImg class="fengrui-img" wx:else="" src="../../images/Images-rafiki.svg" mode="aspectFit" />
 <MOImg class="fengrui-img" wx:if="{{item.attributes.cover != null}}" src="{{item.attributes.cover}}" mode="aspectFill" />
          <MOImg class="fengrui-img" wx:else="" src="../../images/Images-rafiki.svg" mode="aspectFit" />

上方代码是我改动过的，比较喜欢这个显示模式，要保留灵沐原版显示模式请不要修改mode的属性。

实现原理：通过js实现增加一个监控img标签距离底部的距离，距离小于x则加载图片。