最初的方法是使用图片懒加载的方式,但是无论百度还是微信,都需要频繁去计算位置,需要频繁计算,感觉比较消耗内存,所以放弃,脚本51上有篇文章是通过检测节点的方式监控懒加载,没有试,有兴趣可以试一下:https://www.jb51.net/article/144018.htm
经过查看其它博客写的文章,采用预加载的方式,通过image自带的函数bindload来判断图片是否加载完成,默认加载一个小图,加载完成之后触发函数,替换为真实图片地址。具体实现如下(百度小程序):
1、swml代码:
- <view class='list_gridli' bindtap='show_detail'>
- <image src="{{item.thumb}}" mode="aspectFill" data-thumb="{{item.thumb}}" bindload="imgOnLoad" style="display:none"></image>
- <image src="{{item.loaded? item.thumb : item.tempthumb}}" mode="aspectFill"></image>
- <view class='list_grid_tit'> {{item.title}}</view>
- </view>
用两个image标签,第一个设置隐藏,并通过判断是否加载完成,自动触发binload=“imgOnload”。
2、定义imgOnload函数
- imgOnLoad: function (e) {
- let that = this
- var realthumb = e.target.dataset.thumb;
- let list = that.data.list
- for (var i = 0; i < list.length; i++) {
- if (list[i].thumb == realthumb) {
- list[i].loaded = true
- }
- that.setData({
- list: list
- })
- }
- },
3、处理信息列表的默认加载信息,默认loaded=false,设置临时图片地址tempthumb
- success: function (res) {
- var list = res.data;
- for (var i in list) {
- list[i].tempthumb= '../../images/nopic.jpg';//临时图片
- list[i].loaded = false;
- }
- that.setData({
- list: list,
- })
- },
这样,当图片还没有加载完成的时候,显示你设置的临时图片,当加载完成时候,触发imgOnload函数,设置loaded = true,然后src="{{item.loaded? item.thumb : item.tempthumb}}",通过三目运算显示原图。
如有疑问,可留意一块讨论
文章点评