JavaScript & jQuery完美判斷圖片是否載入完畢

NO IMAGE

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

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

例如我的圖片地址:

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,有人說我可以用迴圈去繫結,經過我測試貌似根本沒效果。

還是一笑而過吧。看看我的最終解決方案(相容:谷歌&火狐&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毫秒就掃描一次,可以自己調整
}
}

看了我的程式碼,你是否也有了自己的想法呢?

 以上就是本文的全部內容,希望本文的內容對大家的學習或者工作能帶來一定的幫助,同時也希望多多支援指令碼之家!

您可能感興趣的文章:

JQuery判斷子iframe何時載入完成解決方案怎麼判斷js指令碼載入完成js或者jquery判斷圖片是否載入完成實現程式碼用js判斷頁面是否載入完成實現程式碼判斷jQuery是否載入完成,沒完成繼續判斷的解決方法