MUI 解决动态列表页图片懒加载再次加载不成功的bug问题
更新时间：2017年04月13日 11:32:26 作者：小云菜
这篇文章主要介绍了MUI 解决动态列表页图片懒加载再次加载不成功的bug问题,解决方法很简单的，需要的朋友可以参考下
在项目开发中遇到这样的功能，要求实现列表页动态加载功能，在实现过程中遇到一些小小插曲，下面小编给大家详细说明下解决方法：
首次加载时图片可以获取成功，再次加载失败，通过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问题，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
日常开发中，我们会常常把一些功能提取出来，包装成一个公共模块或者组件.这篇文章主要介绍了webpack公共组件引用路径简化小技巧,非常具有实用价值，需要的朋友可以参考下2018-06-06
这篇文章主要介绍了JavaScript 防盗链的原理以及破解方法，帮助大家更好的理解和使用JavaScript，感兴趣的朋友可以了解下2020-12-12
本文主要介绍了原生js实现手风琴功能（支持横纵向调用）的示例代码。具有一定的参考价值，下面跟着小编一起来看下吧2017-01-01
相信大家都知道数据可视化就是借助图形化的手段把生硬的数据生动化，以此来展示出数据想要表达的信息，而图表是最通常的一种数据可视化手段。可全靠自己纯手动编写各种图表实在是让人头疼，各种计算各种烦。现在就为大家介绍如何用D3.js来实现柱状图。2016-09-09
一直以为 && 和 || 这两个伟大的运算法只能在判断表达式使用，也就是常在if语句使用，原来错了，它还可以运用在简化选择性执行语句的操作，有点拗口，简单点也就是：操作执行某条语句，不执行某条语句。2009-11-11
这篇文章主要介绍了Postman内建变量常用方法实例解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-07-07
js和jq的event对象大同小异，本文简单对比下它们的'click'事件下的不同和应用，给有需要的小伙伴参考下2014-11-11
在浏览器中对于Dom的操作和普通的脚本的操作处于两个不同的dll中，两个dll的交互是比较耗时的，优化对Dom的操作可以提高脚本的执行速度。本文是对如何优化的一些总结。下面跟着小编一起来看下吧2017-01-01
这篇文章主要介绍了JavaScript indexOf()原理及使用方法详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-07-07
这篇文章主要介绍了JS/jquery实现一个网页内同时调用多个倒计时的方法,涉及js与jQuery基于定时器的时间相关操作技巧,需要的朋友可以参考下2017-04-04
最新评论