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

前端之家收集整理的这篇文章主要介绍了微信小程序实现图片懒加载的示例代码前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

图片懒加载

1.xml页面

2.js页面

图片 } 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的方式,有需要的可以留言。

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

猜你在找的微信小程序相关文章