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( $('<div/>').css('display', 'none') );

<强>更新

当我附加到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对象然后在图像上调用load函数的方式有点过分，这使得很难看出为什么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'));
});

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

4 个答案: