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

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