返回旧版| 微信建站| 建站之家论坛| 我要建站 | 建站学习 | 加入收藏
百度小程序当前位置:首页 > cms教程 > 百度小程序 > 正文

小程序实现图片预加载(图片延迟加载)

发布时间:2018-12-04 22:31:34   来源:   点击:
这几天搞百度小程序,对接的网站需要展示大量图片,并且图片都是高清图片,因为要同步支持pc和手机站,在开发者工具中测试的时候,图片都是瞬间加载,因此感觉不出什么,但是真机预览的时候,特别是4G情况下,会出现图片加载缓慢的情况,提交小程序审核,也被驳回,说是图片无法加载。

最初的方法是使用图片懒加载的方式,但是无论百度还是微信,都需要频繁去计算位置,需要频繁计算,感觉比较消耗内存,所以放弃,脚本51上有篇文章是通过检测节点的方式监控懒加载,没有试,有兴趣可以试一下:https://www.jb51.net/article/144018.htm

经过查看其它博客写的文章,采用预加载的方式,通过image自带的函数bindload来判断图片是否加载完成,默认加载一个小图,加载完成之后触发函数,替换为真实图片地址。具体实现如下(百度小程序):

1、swml代码:

  1. <view class='list_gridli' bindtap='show_detail'
  2.        <image src="{{item.thumb}}" mode="aspectFill" data-thumb="{{item.thumb}}" bindload="imgOnLoad" style="display:none"></image> 
  3.        <image src="{{item.loaded? item.thumb : item.tempthumb}}" mode="aspectFill"></image> 
  4.        <view class='list_grid_tit'> {{item.title}}</view> 
  5. </view> 

用两个image标签,第一个设置隐藏,并通过判断是否加载完成,自动触发binload=“imgOnload”。

2、定义imgOnload函数

  1. imgOnLoad: function (e) { 
  2.    let that = this 
  3.    var realthumb = e.target.dataset.thumb; 
  4.    let list = that.data.list 
  5.    for (var i = 0; i < list.length; i++) { 
  6.    if (list[i].thumb == realthumb) { 
  7.     list[i].loaded = true 
  8.    } 
  9.    that.setData({ 
  10.     list: list 
  11.    }) 
  12.    } 
  13.   }, 

3、处理信息列表的默认加载信息,默认loaded=false,设置临时图片地址tempthumb

  1. success: function (res) { 
  2.         var list = res.data; 
  3.         for (var i in list) { 
  4.             list[i].tempthumb= '../../images/nopic.jpg';//临时图片 
  5.             list[i].loaded = false
  6.          } 
  7.          that.setData({ 
  8.             list: list, 
  9.          }) 
  10.       }, 

这样,当图片还没有加载完成的时候,显示你设置的临时图片,当加载完成时候,触发imgOnload函数,设置loaded = true,然后src="{{item.loaded? item.thumb : item.tempthumb}}",通过三目运算显示原图。

如有疑问,可留意一块讨论
版权所有:郑州腾石网络科技有限公司 备案信息:豫ICP备18019117号
站长QQ:2863868475 业务合作咨询:15137100750(同微信)
本站所有投放的广告是有其他网站提供,不代表本站立场,同时网站首页广告位对外出租详情咨询本站站长!同时欢迎广大站长加入个人建站团队
  • 建站客服
  • CMS仿站
  • CMS学习
  • 技术交流群:336572814