javascript - 如何获取动态添加的图像的宽度和高度？

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

您必须等到图像加载完毕才能访问其尺寸。

捕捉图像的onload事件来处理它。

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

this.width如果要获取图像的实际宽度属性，而不是其屏幕尺寸，请注意使用。它们可能不一样。

Answer 2

$("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
    });
})