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