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 相关文章推荐
GWT中复制到剪贴板 js+flash实现复制 兼容性比较好
Mar 07 Javascript
下载文件个别浏览器文件名乱码解决办法
Mar 19 Javascript
利用Keydown事件阻止用户输入实现代码
Mar 11 Javascript
jquery实现效果比较好的table选中行颜色
Mar 25 Javascript
ExtJS4如何自动生成控制grid的列显示、隐藏的checkbox
May 02 Javascript
express的中间件bodyParser详解
Dec 04 Javascript
jQuery模拟360浏览器切屏效果幻灯片(附demo源码下载)
Jan 29 Javascript
Bootstrap入门书籍之(三)栅格系统
Feb 17 Javascript
jQuery表单事件实例代码分享
Aug 18 Javascript
js 轮播效果实例分享
Dec 28 Javascript
javascript循环链表之约瑟夫环的实现方法
Jan 16 Javascript
JavaScript获取select中text值的方法
Feb 13 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
虹吸式咖啡探讨–研磨
2021/03/03 冲泡冲煮
php实现mysql数据库连接操作及用户管理
2015/11/08 PHP
PHP的PDO事务与自动提交
2019/01/24 PHP
jquery利用ajax调用后台方法实例
2013/08/23 Javascript
用C/C++来实现 Node.js 的模块(二)
2014/09/24 Javascript
javascript密码强度校验代码(两种方法)
2015/08/10 Javascript
JavaScript数组合并的多种方法
2016/05/22 Javascript
Angular的Bootstrap(引导)和Compiler(编译)机制
2016/06/20 Javascript
轻松5句话解决JavaScript的作用域
2016/07/15 Javascript
用jmSlip编写移动端顶部日历选择控件
2016/10/24 Javascript
利用Js+Css实现折纸动态导航效果实例源码
2017/01/25 Javascript
深入浅析AngularJS中的一次性数据绑定 (bindonce)
2017/05/11 Javascript
React-Native之定时器Timer的实现代码
2017/10/04 Javascript
vue3.0 CLI - 2.2 - 组件 home.vue 的初步改造
2018/09/14 Javascript
Vue框架里使用Swiper的方法示例
2018/09/20 Javascript
js实现input密码框显示/隐藏功能
2020/09/10 Javascript
详解vue-cli+es6引入es5写的js(两种方法)
2019/04/19 Javascript
javascript单张多张图无缝滚动实例代码
2020/05/10 Javascript
vue单应用在ios系统中实现微信分享功能操作
2020/09/07 Javascript
原生js中运算符及流程控制示例详解
2021/01/05 Javascript
python encode和decode的妙用
2009/09/02 Python
python利用插值法对折线进行平滑曲线处理
2018/12/25 Python
Python二维数组实现求出3*3矩阵对角线元素的和示例
2019/11/29 Python
Python彻底删除文件夹及其子文件方式
2019/12/23 Python
详解CSS的border边框属性及其在CSS3中的新特性
2016/05/10 HTML / CSS
纯CSS3实现Material Design效果
2017/03/09 HTML / CSS
html2canvas截图空白问题的解决
2020/03/24 HTML / CSS
2014元旦晚会策划方案
2014/02/19 职场文书
金融专业毕业生自荐信
2014/06/26 职场文书
竞选班干部演讲稿300字
2014/08/20 职场文书
党员作风建设整改方案
2014/10/27 职场文书
2014年学校党建工作汇报材料
2014/11/02 职场文书
表扬信范文
2015/05/04 职场文书
政工师工作总结2015
2015/05/26 职场文书
python实现A*寻路算法
2021/06/13 Python
Python爬虫框架之Scrapy中Spider的用法
2021/06/28 Python