這篇文章主要為大家展示了“JavaScript和jQuery如何判斷圖片是否加載完畢”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“JavaScript和jQuery如何判斷圖片是否加載完畢”這篇文章吧。

創(chuàng)新互聯(lián)自2013年創(chuàng)立以來，是專業(yè)互聯(lián)網(wǎng)技術服務公司，擁有項目做網(wǎng)站、網(wǎng)站設計網(wǎng)站策劃，項目實施與項目整合能力。我們以讓每一個夢想脫穎而出為使命，1280元新興做網(wǎng)站,已為上家服務,為新興各地企業(yè)和個人服務,聯(lián)系電話:18980820575

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

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

例如我的圖片地址：

/upload/otherpic52/78339.jpg

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

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

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

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

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

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

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

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

這樣：

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

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

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

這樣總可以了吧，我加載一張，就用圖片總數(shù)去減一，減到0我就加載完畢。看起來很完美，前提是你沒遇到IE。

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

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

或者是這樣：

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

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

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

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

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

以上是“JavaScript和jQuery如何判斷圖片是否加載完畢”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學習更多知識，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

名稱欄目：JavaScript和jQuery如何判斷圖片是否加載完畢
鏈接地址：http://www.rwnh.cn/article24/gshdje.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站建設、品牌網(wǎng)站制作、網(wǎng)站改版、微信公眾號、定制開發(fā)、外貿(mào)建站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)