小云菜
小云菜
  • 发布:2015-06-04 17:27
  • 更新:2017-07-17 09:17
  • 阅读:11665

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

分类: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 负责人:无 分享
已邀请:

最佳回复

DCloud_UNI_FXY

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的图片的话,就有类似的效果了.
拉动加载的图片,要这个功能也是必要的,不然图片没有下载下来的时候,就是白的,很难看.

  • DCloud_UNI_FXY

    placeholder的路径是正确的吗?你可以利用浏览器调试一下。

    2015-06-05 18:54

  • 脉搏

    嗯,这个问题,可以慢慢弄,不行的话,就直接加上也行.哈哈

    2015-06-05 18:56

  • 小云菜 (作者)

    我也遇到了placeholder不可用的问题,相对路径是正确的。

    2015-06-06 12:25

小曾

小曾

不错,可以用,感谢分享

移动达人

移动达人

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

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

经过测试:前面这方法有问题,第二次更新界面后,拖动列表图片加载不出来。

经过研究用以下方法可行。

全局 var imgLazyloadApi = null;

// --- 是否重置判断
if(imgLazyloadApi != null) imgLazyloadApi.destroy(); // 如果前面调用过懒加载,销毁前面的对象。

// --- 图片懒加载
imgLazyloadApi = mui('#productsList').imageLazyload({
// placeholder: '../images/60x60.gif'
});

移动达人

移动达人

另外:mui(document).imageLazyload({
placeholder: '../../images/img_head3.png' // 必须要加这个占位符参数,否则第二次刷新列表后偶尔还是会有部分图片无法显示出来。
});

1***@qq.com

1***@qq.com

不错,解决了我的问题,感谢

该问题目前已经被锁定, 无法添加新回复