標籤：
眾所周知，常見瀑布流當滑鼠滾動到瀏覽器底部的時候，就會發起一個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，有人說我可以用迴圈去綁定，經過我測試貌似根本沒效果。
還是一笑而過吧。看看我的最終解決方案（相容：Google&Firefox&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毫秒就掃描一次，可以自己調整
}
}
javaScript & jquery完美判斷圖片是否載入完畢
