9

我需要使用动态创建的图像标签来获取图像的尺寸。有用。但仅当我不将图像添加到 DOM 时才使用 attr('width')。否则，返回的维度为零。为什么？:)

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 进行了测试，在第一个示例中我得到了所有正确的值，但在第二个示例中仍然是两个零。很奇怪。

4

4 回答 4

3

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

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

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

于 2010-12-11T03:37:54.680 回答
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 env 上尝试过 Safari）。

于 2010-12-10T17:11:47.633 回答
0

在我看来，您分配 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());
于 2010-12-08T00:14:42.610 回答
0

我不认为您的关闭按您想要的方式工作。您是否尝试过类似的方法：

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'));
});
于 2010-12-08T01:16:15.193 回答