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 的另一个问题（它甚至没有调用加载处理程序，因为它认为在附加处理程序之前加载了图像），所以我学到的教训是始终在上述顺序。

Answer 2

在 firebug 和 chrome 中尝试了您的代码，它的行为符合预期：

var src = 'http://static.jquery.com/files/rocker/images/logo_jquery_215x53.gif';

this.img = $('<img/>', { 'src': src } );
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) ); 

得到以下结果：

http://static.jquery.com/files/rocker/images/logo_jquery_215x53.gif
215
215
215px

删除 appendTo() 行后，我能够在 Chrome 中重现该行为，但我不觉得奇怪。 width() 正在计算“显示”元素的实际宽度 - 例如，每次将图像放入隐藏的 div 中时，它都会 == 0 ！

尝试用以下内容替换appendTo行，您将得到相同的结果：

this.img.appendTo( $('

').css('display', 'none') );< /code>

更新：

当附加到 DOM 时，Safari 3.1.2 的结果对我来说与 Chrome 完全相同。

当 img 没有插入到 DOM 中时，我也得到了可接受的（没有奇怪的）结果：

http://static.jquery.com/files/rocker/images/logo_jquery_215x53.gif
215
0
0px

我相信你的设置一定有一些独特的东西......或者它是一个 Safari @ Mac OSX 错误（在 Windows 环境下尝试过 Safari） ）。

Answer 3

在我看来，分配 jQuery 对象然后在图像上调用加载函数的方式有点过头了，这使得很难理解为什么 jQuery 会出现这样的行为。

试试这个：

this.img = $('<img />').attr('src', e.url).appendTo('body');
console.log('width: ' + this.img.width());

非常适合我在将图像注入 DOM 后获取它。

你也可以尝试这个：

this.img = $('<img />').attr('src', e.url).css({
   'width': 'auto',
   'height': 'auto'
}).appendTo('body');
console.log('width: ' + this.img.width());
console.log('height: ' + this.img.height());

Answer 4

我认为你的关闭没有按你想要的方式工作。你有没有尝试过类似的事情：

this.img.load(function(){                          // when loaded call function
    console.log(this.attr('src'));
    console.log(this.attr('width'));
    console.log(this.width());
    console.log(this.css('width'));
});