Javascript jQuery:加载后添加到DOM的新图像的宽度始终为0

我需要使用动态创建的图像标记获取图像的尺寸。它起作用了。但仅使用attr（'width'），并且仅当我不将图像添加到DOM时。否则，返回的维度为零。为什么？：）

现在有一件事很奇怪：如果我去掉上面的第二行（appendTo），它会突然起作用，但只对attr（'width'）：

这种行为对我来说毫无意义。我希望得到上述六种情况下的实际图像大小。我现在知道如何解决这个问题，但我想知道为什么会这样。是虫子吗？还是有逻辑上的原因

---

以上结果适用于Safari。我刚刚用Chrome进行了测试，在第一个示例中得到了所有正确的值，但在第二个示例中仍然得到了两个零。非常奇怪。

在我看来，您分配jQuery对象，然后在图像上调用load函数的方式有点过分，这使得很难理解jQuery为何会有这样的行为

试试这个：

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

this.img=$（'
在图像被注入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());

this.img=$（“我认为您的闭包没有按您希望的方式工作。您是否尝试过以下方法：

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

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

删除
appendTo（）
行后，我想在Chrome中重现这种行为，但我并不觉得奇怪。
width（）
正在计算“显示”元素的实际宽度-例如，每次将图像放入隐藏的div中，它都将==0

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

this.img.appendTo（$（''）.css（'display'，'none'）；

更新：

Safari 3.1.2的结果与添加到DOM中的Chrome对我的作用完全相同

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

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

我确信你的设置一定有独特之处……或者是Safari@Mac OSX bug（在Windows环境上试用过Safari）。
我找到了一个可靠的Safari解决方案：


创建图像
附加load（）处理程序
仅在此之后，设置
src
属性

我仍然不明白为什么width应该返回零，但是如果您仅在设置src之后才附加加载处理程序，那么似乎会发生意外情况。我之所以想到这一点，是因为我遇到了IE的另一个问题（IE甚至没有调用加载处理程序，因为它考虑了在附加处理程序之前加载的图像），所以我学到的一课是始终按照上述顺序做事。
你确定你总是有一个有效的e.url吗？？？@travel boy你能给这个变量取一些其他名称，而不是img this.img，this.newImgSource等等…//@travelboy&gov:同意，持有图像的jQuery对象的属性应该更改，因为img是一个tag名称，很好的做法。@gov:我将img重命名为ximg，它不会改变任何东西。是的，e.url是有效的，并且在所有测试中都是相同的。@travelboy我们可以做我下面建议的例子吗//只是为了一个接一个地消除。@Dale:除非图像已经在缓存中，否则你的方法肯定会失败（因为尺寸将在加载图像之前读取）。所以不能这样做-您需要加载功能。我同意travelboy的观点，加载确保图像加载到browser@travelboy，您的代码看起来很完美，元素给出0的唯一其他原因是它们是否出于某种原因被隐藏，您的图像父容器是否被隐藏等等？？？@travelboy，您在吗？如果是，我们可以执行som吗例如，创建一个单独的div占位符，将图像附加到div并执行相同的代码///我认为当它附加到body时有问题，我们可以这样开始调试，@gov:img被添加到body的顶层（就在标记之前），这可能是不寻常的，但这正是我想要的。我只是尝试了你的建议，将其附加到div中。这并没有改变问题的任何方面。值得注意的是，Safari的行为与Chrome不同。我想知道为什么jQuery的width（）方法返回的结果与attr（'width'）不同首先，我不能这样做，因为我需要一个对包含img的对象的引用。但是闭包可以工作（因为我可以访问img和对象的其他属性）奇怪的是：在Safari中，当图像附加到DOM时，图像的宽度为零。我只能在不附加到DOM时读取图像的宽度。你应该会发现这很奇怪！无可否认，Chrome是可以理解的。Safari不是。@travelboy我已经更新了我的答案-我真的很想看到Safa中的奇怪行为但对我来说，它工作得非常正确……正如@gov bellow在您的Safari设置中提到的，img可能由于某种原因被隐藏。
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'));
}); 

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

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