MUI 解決動態(tài)列表頁圖片懶加載再次加載不成功的bug問題
更新時間：2017年04月13日 11:32:26 作者：小云菜
這篇文章主要介紹了MUI 解決動態(tài)列表頁圖片懶加載再次加載不成功的bug問題,解決方法很簡單的，需要的朋友可以參考下
在項目開發(fā)中遇到這樣的功能，要求實現(xiàn)列表頁動態(tài)加載功能，在實現(xiàn)過程中遇到一些小小插曲，下面小編給大家詳細說明下解決方法：
首次加載時圖片可以獲取成功，再次加載失敗，通過chrome調(diào)試發(fā)現(xiàn)img 的 data-lazyload 屬性沒改變
調(diào)試的時候發(fā)現(xiàn)了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;
}
問題找到了，那么就在再次加載數(shù)據(jù)時，清除該屬性就ok了
document.body.removeAttribute('data-imagelazyload');
mui(document).imageLazyload({
placeholder: '../../images/img_head3.png'
});
以上所述是小編給大家介紹的MUI 解決動態(tài)列表頁圖片懶加載再次加載不成功的bug問題，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關文章
日常開發(fā)中，我們會常常把一些功能提取出來，包裝成一個公共模塊或者組件.這篇文章主要介紹了webpack公共組件引用路徑簡化小技巧,非常具有實用價值，需要的朋友可以參考下2018-06-06
這篇文章主要介紹了JavaScript 防盜鏈的原理以及破解方法，幫助大家更好的理解和使用JavaScript，感興趣的朋友可以了解下2020-12-12
原生js實現(xiàn)手風琴功能（支持橫縱向調(diào)用）
本文主要介紹了原生js實現(xiàn)手風琴功能（支持橫縱向調(diào)用）的示例代碼。具有一定的參考價值，下面跟著小編一起來看下吧2017-01-01
相信大家都知道數(shù)據(jù)可視化就是借助圖形化的手段把生硬的數(shù)據(jù)生動化，以此來展示出數(shù)據(jù)想要表達的信息，而圖表是最通常的一種數(shù)據(jù)可視化手段。可全靠自己純手動編寫各種圖表實在是讓人頭疼，各種計算各種煩?，F(xiàn)在就為大家介紹如何用D3.js來實現(xiàn)柱狀圖。2016-09-09
一直以為 && 和 || 這兩個偉大的運算法只能在判斷表達式使用，也就是常在if語句使用，原來錯了，它還可以運用在簡化選擇性執(zhí)行語句的操作，有點拗口，簡單點也就是：操作執(zhí)行某條語句，不執(zhí)行某條語句。2009-11-11
這篇文章主要介紹了Postman內(nèi)建變量常用方法實例解析,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-07-07
js和jq的event對象大同小異，本文簡單對比下它們的'click'事件下的不同和應用，給有需要的小伙伴參考下2014-11-11
在瀏覽器中對于Dom的操作和普通的腳本的操作處于兩個不同的dll中，兩個dll的交互是比較耗時的，優(yōu)化對Dom的操作可以提高腳本的執(zhí)行速度。本文是對如何優(yōu)化的一些總結。下面跟著小編一起來看下吧2017-01-01
這篇文章主要介紹了JavaScript indexOf()原理及使用方法詳解,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-07-07
JS/jquery實現(xiàn)一個網(wǎng)頁內(nèi)同時調(diào)用多個倒計時的方法
這篇文章主要介紹了JS/jquery實現(xiàn)一個網(wǎng)頁內(nèi)同時調(diào)用多個倒計時的方法,涉及js與jQuery基于定時器的時間相關操作技巧,需要的朋友可以參考下2017-04-04