如何获得动态添加图像的宽度和高度？

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如果你想获得的图像的实际宽度属性，不它的屏幕尺寸。他们可能不一样。