眾所周知，常見(jiàn)瀑布流當(dāng)鼠標(biāo)滾動(dòng)到瀏覽器底部的時(shí)候，就會(huì)發(fā)起一個(gè)ajax的請(qǐng)求。在服務(wù)端生成item列表后，通過(guò) js append到相應(yīng)的div里邊。

看起來(lái)很簡(jiǎn)單的樣子，關(guān)鍵問(wèn)題就出在圖片的加載問(wèn)題上，圖片一般都放在服務(wù)器上，通過(guò)http下載到客戶端。

例如我的圖片地址：

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

而圖片下載到本地是需要一定時(shí)間的(網(wǎng)速快的路過(guò))。當(dāng)圖片還沒(méi)有下載完的時(shí)候，使用js獲取到元素的寬高將會(huì)是0。

有的同學(xué)說(shuō)了我使用jquery的ready不就好了。如下：

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

如果這么簡(jiǎn)單就好了，我這里就說(shuō)下ready與window.onload的區(qū)別。

jquery的ready只是dom的結(jié)構(gòu)加載完畢，便視為加載完成。(缺點(diǎn)是圖片沒(méi)有加載完畢，寬高為0，程序出錯(cuò))

js的window.onload是指dom的生成和資源的加載，比如flash、圖片完全加載出來(lái)后才執(zhí)行onload。(缺點(diǎn)就是當(dāng)某一張圖片很大的時(shí)候，豈不阻止了其它js的正常執(zhí)行)

知道了他們的區(qū)別后，我們?cè)賮?lái)談?wù)勅绾伪苊忮e(cuò)誤和選擇性使用。

如果你進(jìn)行了百度，很多人會(huì)告訴你。

這樣：

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

好像很強(qiáng)大的樣子，其實(shí)不然，他的缺點(diǎn)是每加載一張圖片，回調(diào)函數(shù)就執(zhí)行一次。好吧太煩了，我只想全部加載完走一次就可以了。當(dāng)然可以，你可以進(jìn)行修改如下：

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

這樣總可以了吧，我加載一張，就用圖片總數(shù)去減一，減到0我就加載完畢?？雌饋?lái)很完美，前提是你沒(méi)遇到IE。

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

服了吧？繼續(xù)往下看。

或者是這樣：

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

看我原生代碼一統(tǒng)天下，實(shí)際上效果甚微，一次只能處理一個(gè)你準(zhǔn)備寫(xiě)多少個(gè)document，有人說(shuō)我可以用循環(huán)去綁定，經(jīng)過(guò)我測(cè)試貌似根本沒(méi)效果。

還是一笑而過(guò)吧?？纯次业淖罱K解決方案（兼容：谷歌&火狐&IE）

利用圖片沒(méi)有加載完成的時(shí)候，寬高為0。我們很容易判斷圖片的一個(gè)加載情況。如下：

var t_img; // 定時(shí)器
var isLoad = true; // 控制變量
// 判斷圖片加載狀況，加載完成后回調(diào)
isImgLoad(function(){
 // 加載完成
});
// 判斷圖片加載的函數(shù)
function isImgLoad(callback){
 // 注意我的圖片類名都是cover，因?yàn)槲抑恍枰幚韈over。其它圖片可以不管。
 // 查找所有封面圖，迭代處理
 $('.cover').each(function(){
 // 找到為0就將isLoad設(shè)為false，并退出each
 if(this.height === 0){
 isLoad = false;
 return false;
 }
 });
 // 為true，沒(méi)有發(fā)現(xiàn)為0的。加載完畢
 if(isLoad){
 clearTimeout(t_img); // 清除定時(shí)器
 // 回調(diào)函數(shù)
 callback();
 // 為false，因?yàn)檎业搅藳](méi)有加載完成的圖，將調(diào)用定時(shí)器遞歸
 }else{
 isLoad = true;
 t_img = setTimeout(function(){
 isImgLoad(callback); // 遞歸掃描
 },500); // 我這里設(shè)置的是500毫秒就掃描一次，可以自己調(diào)整
 }
}

看了我的代碼，你是否也有了自己的想法呢？

 以上就是本文的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，同時(shí)也希望多多支持腳本之家！

最新評(píng)論