javaScript & jquery完美判斷圖片是否加載完畢

眾所周知,常見瀑布流當鼠標滾動到瀏覽器底部的時候,就會發起一個ajax的請求。在服務端生成item列表后,通過 js append到相應的div里邊。

看起來很簡單的樣子,關鍵問題就出在圖片的加載問題上,圖片一般都放在服務器上,通過http下載到客戶端。

例如我的圖片地址:

//xxx.xxx.com/sc/item/cover/9-4352-c400.jpg

而圖片下載到本地是需要一定時間的(網速快的路過)。當圖片還沒有下載完的時候,使用js獲取到元素的寬高將會是0。

-------------------------------------------------------------------

有的同學說了我使用jQuery的ready不就好了。如下

$(document).ready(function(){
 // 在這里寫你的代碼...
});

如果這么簡單就好了,我這里就說下ready與window.onload的區別。

jquery的ready只是dom的結構加載完畢,便視為加載完成。(缺點是圖片沒有加載完畢,寬高為0,程序出錯)

js的window.onload是指dom的生成和資源的加載,比如flash、圖片完全加載出來后才執行onload。(缺點就是當某一張圖片很大的時候,豈不阻止了其它js的正常執行)

-------------------------------------------------------------------------------------

知道了他們的區別后,我們再來談談如何避免錯誤和選擇性使用。

如果你進行了百度,很多人會告訴你。

這樣:

$('img').load(function(){
 // 加載完成    
});

 

好像很強大的樣子,其實不然,他的缺點是每加載一張圖片,回調函數就執行一次。好吧太煩了,我只想全部加載完走一次就可以了。當然可以,你可以進行修改如下:

va imgNum=$('img').length;
$('img').load(function(){
   if(!--imgNum){
       // 加載完成
   }
});

 

這樣總可以了吧,我加載一張,就用圖片總數去減一,減到0我就加載完畢??雌鵠春芡昝?,前提是你沒遇到IE。

IE的圖片總是從緩存文件里去拿,這就造成load方法根本就不執行,只有是新圖片才會走load。

服了吧?繼續往下看。

---------------------------------------------------------------

或者是這樣:

document.getElementById('img').onload=function(){
       // 加載完成
};

 

看我原生代碼一統天下,實際上效果甚微,一次只能處理一個你準備寫多少個document,有人說我可以用循環去綁定,經過我測試貌似根本沒效果。

還是一笑而過吧??純次業淖鈧戰餼齜槳福嬡藎汗雀?amp;火狐&IE)

-------------------------------------------------------------

利用圖片沒有加載完成的時候,寬高為0。我們很容易判斷圖片的一個加載情況。如下:

var t_img; // 定時器
var isLoad = true; // 控制變量

// 判斷圖片加載狀況,加載完成后回調
isImgLoad(function(){
   // 加載完成
});

// 判斷圖片加載的函數
function isImgLoad(callback){
   // 注意我的圖片類名都是cover,因為我只需要處理cover。其它圖片可以不管。
   // 查找所有封面圖,迭代處理
   $('.cover').each(function(){
       // 找到為0就將isLoad設為false,并退出each
       if(this.height === 0){
           isLoad = false;
           return false;
       }
   });
   // 為true,沒有發現為0的。加載完畢
   if(isLoad){
       clearTimeout(t_img); // 清除定時器
       // 回調函數
       callback();
   // 為false,因為找到了沒有加載完成的圖,將調用定時器遞歸
   }else{
       isLoad = true;
       t_img = setTimeout(function(){
           isImgLoad(callback); // 遞歸掃描
       },500); // 我這里設置的是500毫秒就掃描一次,可以自己調整
   }
}

來源:CSDN

上一篇: 當提到“一切皆女(dui)人(xiang)”時,Javascript程序猿到底在說熟么呢??

下一篇: 雙11的極限挑戰——5個極致目標教你玩轉前端棧

分享到: 更多
重庆时时开奖直播 pk10走势图查询 3d稳杀四码绝招3d选号必中计算方法 北京pk10高手赌法 长期 玩二八杠的技巧口诀 手机牛牛明牌抢庄规律 在线捕鱼赢现金手机版下载 keno100技巧 彩票手机app 3d单选 快三倍投计划图 时时彩组六720注号码 pc加拿大28规则 红包扫雷 36码大特围 12选5投注规律