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
    });
})

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

2 个答案: