微信小程序实现图片懒加载的示例代码

本文主要介绍微信小程序的模拟图片懒加载,实现的原理是通过页面预加载图片认图),加载完成后再显示出来原图,而非真正意义上的懒加载(跟web的懒加载还有很大的差距),只是借此提高用户体验度。

图片懒加载

1.xml页面

rush:xml;">

2.js页面

rush:js;"> //ajax请求数据 onLoad: function () { var that = this var page = that.data.page wx.request({ url: request_url,data: { 'signature': signature,'page':1,'pageSize': 2 },success: function (res) { let list = res.data.content for (var i = 0; i < list.length; i++) { list[i].url = "../../img/771.gif" //用json的格式创建url,作为加载过度图片 } that.setData({ list: list,}) } }) },//监听图片加载页面 _imgOnLoad: function (e) { // console.log(e) var loadedUrl = e.target.id let that = this let list = that.data.list for (var i = 0; i < list.length; i++) { if (list[i].cover_url == loadedUrl) { list[i].loaded = true } that.setData({ list }) } }

tips:上述数据加载的代码为get的方式,需要数据加密的则选择post的方式,有需要的可以留言。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


开发微信小程序的用户授权登录功能
小程序开发页面如何实现跳转?
浅谈小程序开发中蓝牙连接错误分析及解决方法
什么是小程序?它有哪些功能?
如何配置小程序开发项目结构?(教程)
怎么把自己的店加入小程序
微信小程序怎么实现购物车功能?(方法介绍)
小程序使用函数节流解决页面多次跳转问题
小程序中下拉刷新页面的功能怎么实现?
小程序生成参数二维码的方法介绍
小程序开发中使用事件监听器的方法介绍
开发小程序需要掌握哪些技术
微信小程序无法获取定位怎么办
小程序如何通过watch和computed检测数据
谈谈小程序开发中一些常见错误和排除方法
小程序介绍一般写什么内容
小程序API可以实现什么功能?
小程序中如何管理session?
小程序的21个新功能
小程序如何实现分页加载数据功能?