首先描述一下功能##
實現列表頁動態加載
通過官方提供的"下拉刷新和上拉刷新"及"圖片懶加載"示例實現。
http://www.cnblogs.com/phillyx/
然后說一下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'
});
END##
那么問題來了:
為什么會這么考慮,還有其他的解決方案么?
最新的解決方案參考DCloud問答的官方回復