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