jQuery 判斷圖片是否加載完成方法匯總

更新時間：2015年08月10日 09:49:47 投稿：hebedich

有時候我們在前端開發(fā)工作中為了獲取圖片的信息，需要在圖片加載完成后才可以正確的獲取到圖片的大小尺寸，并且執(zhí)行相應的回調(diào)函數(shù)使圖片產(chǎn)生某種顯示效果。本文主要整理了幾種常見的jquery判斷圖片加載完成時的方法

對于圖片的處理，例如幻燈片播放、縮放等，都是依賴于在所有圖片完成之后再進行操作。

今天來看下如何判斷所有的圖片加載完成，而在加載完成之前可以使用 loading 的 gif 圖表示正在加載中。

一、普通方法

監(jiān)聽 img 的 load 方法，每 load 一張圖片比較一次。關鍵代碼如下：

var num = $img.length;

$imgs.load(function() {
  num--;
  if (num > 0) {
    return;
  }
  console.log('load compeleted');
}

二、使用 jQuery 中的 Deferred 對象

Deferred 對象是從 jQuery 1.5.0 版本開始引入的一個新功能，詳細介紹可以見官方文檔。

簡單的說，Deferred 對象就是jQuery的回調(diào)函數(shù)解決方案，它解決了如何處理耗時操作的問題，對那些操作提供了更好的控制，以及統(tǒng)一的編程接口。

阮一峰有一篇文章是介紹 Deferred 對象的，寫的比較詳細，對于入門比較有用。

jQuery的deferred對象詳解

在這里，我們用到了：

deferred.resolve(): Resolve a Deferred object and call any doneCallbacks with the given args.
deferred.when(): Provides a way to execute callback functions based on one or more objects, usually Deferred objects that represent asynchronous events.
deferred.done(): Add handlers to be called when the Deferred object is resolved.

關鍵代碼：

var defereds = [];

$imgs.each(function() {
  var dfd = $.Deferred();

  $(this).load(dfd.resolve);
  defereds.push(dfd);
});
$.when.apply(null, defereds).done(function() {
  console.log('load compeleted');
});

基本思路：

每加載完一張圖片 resolve()，when() 當所有的 Deferred 完成便執(zhí)行 done()。

注：因為 $.when 支持的參數(shù)是 $.when(dfd1, dfd2, dfd3, ...)，所以我們這里使用了 apply 來接受數(shù)組參數(shù)。

complete判斷圖片是否加載了

感謝谷歌，找到了好使的方法，簡單用法就是：

qim=new Image();//新建一個圖片；
qim.src=$preload;//圖片地址是你準備要加載的地址；
if(qim.complete){ $("#cxNfloor").html($filetoload);//qim.complete表示這個圖片是否加載完畢了
}

后來又發(fā)現(xiàn)一個方法

$("").load(function(){...});

其中選擇器是圖片的id或class，function里面的方法就是回調(diào)函數(shù)，在圖片加載完成后執(zhí)行，但是我試驗了很多，壓根兒不是那么回事，正確的解決方法是：

//jquery的方式
$("#imageId").load(function(){
  alert("加載完成！");
});

有朋友說使用js是最好的，方法如下

復制代碼代碼如下:

document.getElementById("img2").onload=function(){}

在網(wǎng)上找到一段代碼
例子

function loadImage(url, callback) {
 var img = new Image(); //創(chuàng)建一個Image對象，實現(xiàn)圖片的預下載
 img.src = url;
 
 if(img.complete) { // 如果圖片已經(jīng)存在于瀏覽器緩存，直接調(diào)用回調(diào)函數(shù)
   callback.call(img);
   return; // 直接返回，不用再處理onload事件
  }
 img.onload = function () { //圖片下載完畢時異步調(diào)用callback函數(shù)。
    callback.call(img);//將回調(diào)函數(shù)的this替換為Image對象
  };
};

下面是針對多個image的加載判斷。

var imgdefereds=[];
$('img').each(function(){
 var dfd=$.Deferred();
 $(this).bind('load',function(){
 dfd.resolve();
 }).bind('error',function(){
 //圖片加載錯誤，加入錯誤處理
 // dfd.resolve();
 })
 if(this.complete) setTimeout(function(){
 dfd.resolve();
 },1000);
 imgdefereds.push(dfd);
})
$.when.apply(null,imgdefereds).done(function(){
  callback();
});

使用這種方法就可以避免window.onload的不足，不過代碼稍顯復雜在性能方面比起window.onload經(jīng)強很多。

您可能感興趣的文章: