獲取圖像信息的最佳做法

Question

我嘗試使用JQuery ad將圖像加載到HTML元素中，並使用圖像屬性來執行其他操作。 什麼，我試圖做的是這樣的：

var img = new Image(); 
img.src = "icon.png"; 
var width = img.width; 
var height = img.height; 
$("#element").css("background-image", "url(" + img.src + ")"); 
//use width and height... 

它的工作原理時代的大多數，但我發現，有時「寬度」和「高度」設置爲0 做一些搜索，我發現圖像加載是一個異步作業，所以它發生時，我試圖讀取它仍然沒有加載時的屬性。 我發現有一個onLoad事件，我可以用它來指定圖像加載時的回調函數。

我不知道這是做這種事情的最好方法。比如說，我只需要一些關於圖像的信息，但我不需要顯示它，並且我想管理那些信息客戶端。 我需要加載圖片嗎？ 有沒有其他方法可以獲取這些信息？

Answer 1

你必須等待加載圖像：

var img = new Image(); 
img.onload = function() { 
    var width = img.width; 
    var height = img.height; 
    $("#element").css("background-image", "url(" + img.src + ")"); 
}; 
img.src = "icon.png"; 

由於圖像必須從分配給「src」屬性的URL抓取，操作是異步處理。也就是說，您不能保證該圖像可用於分配「src」屬性後的語句。

它有時起作用，因爲您的圖像可能會被緩存。