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


Posted in Javascript onDecember 13, 2017

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

多图片懒加载

1.xml页面

<block wx:for="{{list}}" wx:key="">
  <image class='relative width-100 mgb-20 fade_in' src='{{item.cover_url}}' mode='widthFix' style='display:none' bindload="_imgOnLoad" id='{{item.cover_url}}'></image>
   <view class='tag-bg {{item.checked?"tag-bg1":""}}'></view>
   <view class='tag-text fz-30 fwb'>{{item.type_name}}</view>
   <image class='relative width-100 mgb-20 fade_in {{item.loaded?"":"loading-img"}}' src='{{item.loaded?item.cover_url:item.url}}' mode='widthFix'></image>
 </block>

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
firefox浏览器不支持innerText的解决方法
Aug 07 Javascript
利用javascript数组长度循环数组内所有元素
Dec 27 Javascript
javascript包装对象实例分析
Mar 27 Javascript
jquery拖拽效果完整实例(附demo源码下载)
Jan 14 Javascript
AngularJs页面筛选标签小功能
Aug 01 Javascript
浅谈Cookie的生命周期问题
Aug 02 Javascript
JavaScript中 ES6 generator数据类型详解
Aug 11 Javascript
详细解读Jquery各Ajax函数($.get(),$.post(),$.ajax(),$.getJSON())
Aug 15 Javascript
JavaScript数组的5种迭代方法
Sep 29 Javascript
详解如何解决vue开发请求数据跨域的问题(基于浏览器的配置解决)
Nov 12 Javascript
小试小程序云开发(小结)
Jun 06 Javascript
微信小程序移动拖拽视图-movable-view实例详解
Aug 17 Javascript
详解vue-cli 接口代理配置
Dec 13 #Javascript
vue项目总结之文件夹结构配置详解
Dec 13 #Javascript
vue.js简单配置axios的方法详解
Dec 13 #Javascript
关于Vue单页面骨架屏实践记录
Dec 13 #Javascript
JS实现利用两个队列表示一个栈的方法
Dec 13 #Javascript
node vue项目开发之前后端分离实战记录
Dec 13 #Javascript
详解vue-cli快速构建vue应用并实现webpack打包
Dec 13 #Javascript
You might like
hessian 在PHP中的使用介绍
2010/12/13 PHP
php多用户读写文件冲突的解决办法
2013/11/06 PHP
JS 动态加载脚本的4种方法
2009/05/05 Javascript
使用jQuery简化Ajax开发 Ajax开发入门
2009/10/14 Javascript
js实现绿白相间竖向网页百叶窗动画切换效果
2015/03/02 Javascript
js操作css属性实现div层展开关闭效果的方法
2015/05/11 Javascript
jQuery实现图片渐入渐出切换展示效果
2015/08/15 Javascript
JS常见问题之为什么点击弹出的i总是最后一个
2016/01/05 Javascript
jQuery操作动态生成的内容的方法
2016/05/28 Javascript
学习Angular中作用域需要注意的坑
2016/08/17 Javascript
Jqprint实现页面打印
2017/01/06 Javascript
bootstrapValidator.min.js表单验证插件
2017/02/09 Javascript
angularjs实现下拉列表的选中事件示例
2017/03/03 Javascript
Vuex之理解state的用法实例
2017/04/19 Javascript
基于JavaScript实现弹幕特效
2020/08/27 Javascript
原生JS实现 MUI导航栏透明渐变效果
2017/11/07 Javascript
nodejs发送http请求时遇到404长时间未响应的解决方法
2017/12/10 NodeJs
JavaScript如何判断input数据类型
2020/02/06 Javascript
Vue实现浏览器打印功能的代码
2020/04/17 Javascript
JavaScript实现矩形块大小任意缩放
2020/08/25 Javascript
vue treeselect获取当前选中项的label实例
2020/08/31 Javascript
Python对象类型及其运算方法(详解)
2017/07/05 Python
Django中ORM表的创建和增删改查方法示例
2017/11/15 Python
使用python实现抓取腾讯视频所有电影的爬虫
2019/04/15 Python
flask利用flask-wtf验证上传的文件的方法
2020/01/17 Python
基于python纯函数实现井字棋游戏
2020/05/27 Python
Django中F函数的使用示例代码详解
2020/07/06 Python
Python json解析库jsonpath原理及使用示例
2020/11/25 Python
详解Canvas 跨域脱坑实践
2018/11/07 HTML / CSS
abstract class和interface有什么区别
2013/08/04 面试题
大学专科生推荐信范文
2013/11/23 职场文书
央视元宵晚会主持串词
2014/03/25 职场文书
汽修专业自荐信
2014/07/07 职场文书
寻衅滋事罪辩护词
2015/05/21 职场文书
教师法制教育培训学习心得体会
2016/01/14 职场文书
学习nginx基础知识
2021/09/04 Servers