动态列表页图片懒加载，再次获取数据时图片加载不成功

分类：MUI

懒加载

首先描述一下功能

实现列表页动态加载
通过官方提供的"下拉刷新和上拉刷新"及"图片懒加载"示例实现。

然后说一下bug

1.首次加载时图片可以获取成功，
2.再次加载失败，通过chrome调试发现img 的 data-lazyload 属性没改变
3.调试的时候发现了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;  
        }

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

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

END

那么问题来了：

为什么会这么考虑，还有其他的解决方案么？

2015-06-04 17:27 负责人:无分享

6 个回复

最佳回复

DCloud_UNI_FXY

那是为了避免重复初始化lazyload。
通常在下拉刷新，上拉加载里边，不建议使用lazyload。意义不大。本身每次加载的数据就不多，没必要lazyload。
动态增加的图片节点使用lazyload的方案：

var imgLazyloadApi = mui(document).imageLazyload({...});//页面初始化的时候初始化lazyload  

....  
//上拉加载或下拉刷新的callback里边，动态增加节点后，执行一次下列函数  
imgLazyloadApi.addElements();//重新获取动态添加的节点加入lazyload  
....

吾艾羊

嗯，果然可以了

2016-11-08 09:43

脉搏

我也是遇到了这个问题,一直放着没搞呢,以为是BUG,还在等升级,今天来看,居然看到了.今天晚上就测试测试~,还有就是我上次测试的时候遇到了,可以懒加载,但是那个placeholder没起作用,图片的地方是白的.如果我给那个IMG加上SRC=placeholder的图片的话,就有类似的效果了.
拉动加载的图片,要这个功能也是必要的,不然图片没有下载下来的时候,就是白的,很难看.