檢查圖像是否加載在jQuery（或普通的JavaScript）

我知道在jQuery中有一個load()事件，它在圖像加載完成時觸發。但是如果事件處理程序在圖像加載完成後連接呢？檢查圖像是否加載在jQuery（或普通的JavaScript）

是否有像$('#myimage').isLoaded()這樣的屬性來檢查圖像是否已經加載？

2012-07-07 this.lau_

我認爲這正是你需要的：[http://stackoverflow.com/a/1257418/235710](http://stackoverflow.com/a/1257418/235710） – 2012-07-07 08:37:13

您可以檢查圖像的complete屬性。

是否有像$('#myimage').isLoaded()這樣的屬性來檢查圖像是否已經加載？

沒有，但是你可以把這樣:)

jQuery.fn.isLoaded = function() { 
    return this 
      .filter("img") 
      .filter(function() { return this.complete; }).length > 0; 
};

這如果集合中的所有圖像都被加載產生true和false如果一個或多個圖像不是。你可以調整它以適應你的需求。

來源

2012-07-07 08:48:14 alex

'.complete'實際上得到了相當廣泛的支持。它已經在HTML5中被標準化，但在此之前就已經被支持了（即使是IE6，我相信）。 – jfriend00 2012-07-07 08:58:29

@ jfriend00謝謝，學到了新東西:) – alex 2012-07-08 01:19:50

它有點駭人聽聞，我不確定它會在任何地方工作。做自己的測試。

$.fn.isLoaded = function(message) { 
    var $this = $(this); 
    if($this.height() > 0 && $this.width() > 0){ 
    return true; 
    } 
    return false; 
}; 

$('#myimage').isLoaded()

編輯：

這在FF和鉻，

$.fn.isLoaded = function(message) { 
    var $this = $(this); 
    $this.hide(); // becaues firefox gives a 24*24 dimension 
    var w = this[0].width; 
    var h = this[0].height; 
    $this.show(); 
    if(w > 0 || h > 0){ 
    return true; 
    } 
    return false; 
}; 
console.log($('#myimage').isLoaded());

，但如果你隱藏圖像即給出0的寬度和高度，所以它沒有爲IE。對於ie，你不應該隱藏圖像。

我希望有人可以將這兩個功能結合起來製作一個跨瀏覽器的東西，至少它肯定會幫助某個人。

來源

2012-07-07 08:45:10 Jashwant

這隻適用於圖像在頁面上並顯示。使用'this [0] .height'和'this [0] .width'代替它們（如果圖像被加載，則設置爲圖像尺寸） – Esailija 2012-07-07 08:46:31

很奇怪，但它給了firefox上的24x24尺寸。在鉻中工作正常。我猜24 * 24是圖像的大小，顯示何時沒有圖像被發現。 – Jashwant 2012-07-07 09:01:05

確實，這兩種解決方案都很蹩腳 – Esailija 2012-07-07 09:01:56

Plain JS in enough。圖像對象具有完整的屬性。在此處查看：http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_img_complete

來源

2012-07-07 08:47:11 sleepwalker

檢查圖像是否加載在jQuery（或普通的JavaScript）

回答

相關問題