jQuery:添加到DOM的新图像在加载后总是具有宽度0

Question

我需要使用动态创建的图像标记来获取图像的尺寸.有用.但是只使用attr('width')并且仅在我不将图像添加到DOM时使用.否则,返回的维度为零.为什么？:)

this.img = $('<img/>', {'src': e.url} );           // generate image
this.img.appendTo('body');                         // add to DOM
this.img.load(function(self){return function(){    // when loaded call function
    console.log(self.img.attr('src'));
    console.log(self.img.attr('width'));
    console.log(self.img.width());
    console.log(self.img.css('width'));
}; }(this) );                                      // pass object via closure

因此,我生成图像,将其添加到DOM并定义在加载图像时要调用的处理函数.我正在使用一个闭包来传递它对原始对象的引用,在闭包中称为"self".我正在转储图片的URL以确保引用正常.输出是:

pic.jpg
0
0
0px

现在这是奇怪的事情:如果我删除上面的第二行(appendTo),那么它突然起作用,但仅适用于attr('width'):

pic.jpg
1024
0
0px

这种行为对我没有任何意义.我希望在上述所有六种情况下获得实际图像大小.我现在知道如何解决问题,但我想了解它为什么会发生.这是一个错误吗？还是有一些合乎逻辑的理由呢？

以上结果适用于Safari.我刚刚使用Chrome测试,我在第一个示例中获得了所有正确的值,但在第二个示例中仍然是两个零.很奇怪.

Answer 1

我找到了一个可靠的 Safari 解决方案：

• 创建图像
• 附加 load() 处理程序
• 之后，设置src属性！

我仍然不明白为什么宽度应该返回零，但如果仅在设置 src 之后附加负载处理程序，似乎会发生意外的事情。我之所以有这个想法，只是因为我遇到了 IE 的另一个问题（它甚至没有调用加载处理程序，因为它认为在附加处理程序之前加载了图像），所以我学到的教训是始终在上述顺序。