MUI 解决动态列表页图片懒加载再次加载不成功的bug问题


Posted in Javascript onApril 13, 2017

在项目开发中遇到这样的功能,要求实现列表页动态加载功能,在实现过程中遇到一些小小插曲,下面小编给大家详细说明下解决方法:

首次加载时图片可以获取成功,再次加载失败,通过chrome调试发现img 的 data-lazyload 属性没改变

调试的时候发现了bug

$.fn.imageLazyload = function(options) {
    var lazyloadApis = [];
    this.each(function() {
      var self = this;
      var lazyloadApi = null;
      if (self === document || self === window) {
        self = document.body;
      }
 //对,bug就在这,判定时如果body已有该属性,就不在加载了,整体的代码没看明白,注释太少了啊
      var id = self.getAttribute('data-imageLazyload');
      if (!id) {
        id = ++$.uuid;
        $.data[id] = lazyloadApi = new ImageLazyload(self, options);
        self.setAttribute('data-imageLazyload', id);
      } else {
        lazyloadApi = $.data[id];
      }
      lazyloadApis.push(lazyloadApi);
    });
    return lazyloadApis.length === 1 ? lazyloadApis[0] : lazyloadApis;
  }

问题找到了,那么就在再次加载数据时,清除该属性就ok了

document.body.removeAttribute('data-imagelazyload');
  mui(document).imageLazyload({
    placeholder: '../../images/img_head3.png'
  });

以上所述是小编给大家介绍的MUI 解决动态列表页图片懒加载再次加载不成功的bug问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Mootools 1.2教程(2) DOM选择器
Sep 14 Javascript
js textarea自动增高并隐藏滚动条
Dec 16 Javascript
JS+DIV实现鼠标划过切换层效果的方法
May 25 Javascript
JavaScript面对国际化编程时的一些建议
Jun 24 Javascript
jQuery表单验证功能实例
Aug 28 Javascript
mvvm双向绑定机制的原理和实现代码(推荐)
Jun 07 Javascript
微信小程序 form组件详解
Oct 25 Javascript
利用VUE框架,实现列表分页功能示例代码
Jan 12 Javascript
jQuery设置图片等比例缩小的方法
Apr 29 jQuery
laravel5.3 vue 实现收藏夹功能实例详解
Jan 21 Javascript
微信小程序实现页面分享onShareAppMessage
Aug 12 Javascript
原生JS与CSS实现软件卸载对话框功能
Dec 05 Javascript
MUI  Scroll插件的使用详解
Apr 13 #Javascript
MUI 上拉刷新/下拉加载功能实例代码
Apr 13 #Javascript
从零开始学习Node.js系列教程四:多页面实现的数学运算示例
Apr 13 #Javascript
mui上拉加载功能实例详解
Apr 13 #Javascript
从零开始学习Node.js系列教程三:图片上传和显示方法示例
Apr 13 #Javascript
JS开发中百度地图+城市联动实现实时触发查询地址功能
Apr 13 #Javascript
从零开始学习Node.js系列教程二:文本提交与显示方法
Apr 13 #Javascript
You might like
Windows 下的 PHP-PEAR 安装方法
2010/11/20 PHP
CodeIgniter输出中文乱码的两种解决办法
2014/06/12 PHP
php判断类是否存在函数class_exists用法分析
2014/11/14 PHP
php rmdir使用递归函数删除非空目录实例详解
2016/10/20 PHP
thinkPHP框架实现的简单计算器示例
2018/12/07 PHP
php快速导入大量数据的实例方法
2019/09/23 PHP
抽出www.templatemonster.com的鼠标悬停加载大图模板的代码
2007/07/11 Javascript
JavaScript 自动完成脚本整理(33个)
2009/10/20 Javascript
使用js对select动态添加和删除OPTION示例代码
2013/08/12 Javascript
JavaScript基础语法、dom操作树及document对象
2014/12/02 Javascript
jQuery中:empty选择器用法实例
2014/12/30 Javascript
基于Jquery实现表单验证
2020/07/20 Javascript
JavaScrip调试技巧之断点调试
2015/10/22 Javascript
基于Bootstrap里面的Button dropdown打造自定义select
2016/05/30 Javascript
Seajs是什么及sea.js 由来,特点以及优势
2016/10/13 Javascript
用自定义图片代替原生checkbox实现全选,删除以及提交的方法
2016/10/18 Javascript
js弹出窗口简单实现代码
2017/03/22 Javascript
JavaScript中的return布尔值的用法和原理解析
2017/08/14 Javascript
JS实现的倒计时恢复按钮点击功能【可用于协议阅读倒计时】
2018/04/19 Javascript
Vue路由钩子之afterEach beforeEach的区别详解
2018/07/15 Javascript
vue watch普通监听和深度监听实例详解(数组和对象)
2018/08/16 Javascript
小程序点击图片实现自动播放视频
2020/05/29 Javascript
js实现简单的日历显示效果函数示例
2019/11/25 Javascript
微信小程序调用wx.getImageInfo遇到的坑解决
2020/05/31 Javascript
浅谈Python程序与C++程序的联合使用
2015/04/07 Python
安装Python的web.py框架并从hello world开始编程
2015/04/25 Python
Python简单生成随机姓名的方法示例
2017/12/27 Python
Python 读取指定文件夹下的所有图像方法
2018/04/27 Python
Django REST Framework 分页(Pagination)详解
2020/11/30 Python
HTML5中使用json对象的实例代码
2018/09/10 HTML / CSS
sleep()方法和wait()方法的区别是什么
2012/11/17 面试题
初一英语教学反思
2014/01/11 职场文书
会展策划与管理专业求职信
2014/06/09 职场文书
法院四风对照检查材料思想汇报
2014/10/06 职场文书
Java SSH 秘钥连接mysql数据库的方法
2021/06/28 Java/Android
让JavaScript代码更加精简的方法技巧
2022/06/01 Javascript