之前的圖像大小在DOM中

在將其放入DOM之前，如何獲取圖像大小？之前的圖像大小在DOM中

var imgLoad = $("<img />"); 
$(imgLoad).attr("src", ImageGallery.ImagesList[index] + "?" + new Date().getTime()); 
$(imgLoad).unbind("load"); 
$(imgLoad).bind("load", function() { 

    // Get image sizes 
    alert(imgLoad.width()); // RETURN 0 

});

來源

2011-05-25 David Horák

使用imgLoad[0].width和imgLoad[0].height替代，或者用this代替imgLoad：

var imgLoad = $("<img />"); 
imgLoad.attr("src", ImageGallery.ImagesList[index] + "?" + new Date().getTime()); 
imgLoad.unbind("load"); 
imgLoad.bind("load", function() { 

    // Get image sizes 
    alert(this.width); 

});

工作演示：http://jsfiddle.net/7twNk/

這工作，因爲瀏覽器填充元素下載圖像時的屬性。另一方面，jQuery獲取元素—的實際可見尺寸，當元素不顯示時，它總是0。

請注意，您不需要繼續使用$()包裝imgLoad，因爲它已經是jQuery對象。

來源

2011-05-25 12:28:12

+1注包裝 – 2011-05-25 12:47:39

@安迪-E的感謝名單正常工作！ – 2011-05-25 12:51:29

注意：如果你想得到已經在DOM中的圖像的自然寬度和高度，你可以隱藏它（'display：none;'），然後像上面的例子那樣調用'img.width'。您可能需要設置0ms超時以消除更新DOM與檢查寬度的競爭條件。 – colllin 2013-05-11 02:00:47

創建新圖像時，.width將爲您提供未呈現圖像的原始尺寸，而.width（）是一個jQuery方法，並且在將圖像插入DOM之前不返回值。

在普通的老JS;

var i = new Image() 
i.src = 'blah.gif' 
var h = i.height 
var w = i.width

將返回真值

來源

2011-05-25 12:42:27 BusterLuke

瀏覽器在獲取圖像時不會停止JS執行，因此您需要等待'onload'事件才能檢索尺寸。 – 2011-05-25 12:44:43

之前的圖像大小在DOM中

回答

相關問題