如何獲得動態添加圖像的寬度和高度？

Question

我有一個動態添加一些img標籤的真正寬度和高度的問題。這裏是我的代碼：

var imgcont = $("<img src='' /> "); 
imgcont.css("display","none").appendTo("body");` 

$("div#lightbox ul").on("click","li", function(){ 
        var source = $(this).children("img").attr("src"); 
        console.log(imgcont.attr("src",source).width()); 
       })` 

如果我點擊了我第一次得到的寬度和高度正確的價值觀，但如果我點擊第二次，我得到了以前單擊元素的值。爲了獲得正確的值，我必須再次點擊相同的元素。

如何在第一次點擊時獲得正確的img寬度和高度值？

Answer 1

$("div#lightbox ul").on("click", "li", function() { 
    var source = $(this).children("img").attr("src"); 
    imgcont.attr("src", source).load(function() { // after load finish 
                // get width 

     console.log(this.width); // according to @Alnitak comment 
    }); 
}) 

Answer 2

您必須等到圖像加載完成後才能訪問其尺寸。

抓住圖像的onload事件來處理。

imgcont.on('load', function() { 
    console.alert(this.width); 
}); 

注意使用this.width如果你想獲得的圖像的實際寬度屬性，不它的屏幕尺寸。他們可能不一樣。