当前位置： 移动技术网 > IT编程>开发语言>JavaScript > MUI 解决动态列表页图片懒加载再次加载不成功的bug问题

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

2018年05月21日  | 移动技术网IT编程  | 我要评论

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

首次加载时图片可以获取成功，再次加载失败，通过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问题，希望对大家有所帮助

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网