jquery img width（）给出0

奇怪的问题 您知道为什么会出现这种代码：

var img = new Image();
img.src = 'images/img1.jpg';

$(img).on('load', function() {
   alert($(this).width());

});

在Firefox中给出0，Chrome在IE9中给出正确的值？ 如何在所有浏览器中获得适当的值？ 使用jquery1.8.2

var img = new Image();
img.src = 'images/img1.jpg'; 

img.onload = function() {
   alert(this.width);
};

---

根据jQuery文档

http://api.jquery.com/load-event/

与图像一起使用时加载事件的注意事项： 开发人员试图使用.load（）快捷方式解决的一个常见问题 是在图像（或图像集合）具有 满载的。有几个已知的警告应该 值得注意。这些是：

1.它在跨浏览器时工作不一致，也不可靠 2.如果图像src设置为与以前相同的src，则在WebKit中无法正确触发 3.它不能正确地在DOM树上冒泡 4.对于已经存在于浏览器缓存中的图像，可以停止激发

---

如果您查看文档下面的注释，许多人都有相同的问题，因为加载事件在webkit中没有触发，通常是在src设置为与之前相同时。。。也许您需要设置一个占位符图像，然后更改src属性。

jQuery确定对象尺寸的方法是通过检查

样式

属性（afaik）；因为图像从未被添加到DOM中，所以它不会知道这一点

话虽如此，我看不出您需要jQuery的具体原因：

var img = new Image();
img.onload = function() {
    alert(this.width);
}
img.src = 'http://example.org/path/to/image.jpg';

要使用jQuery设置维度，可以使用以下方法：

$(this)
    .width(this.width)
    .height(this.height);

---

但不确定您为什么需要它，因为在渲染时浏览器已经知道图像有多大，这与添加

属性不同，否则如果浏览器缓存了图像，您可能会错过加载事件。
直到您将
图像添加到dom
.width（）
返回
0

var img = new Image();
img.src = 'http://jsfiddle.net/img/logo.png';
$(img).on('load', function() {
    console.log(this.width); // 160
    console.log($(this).context.width); // 160
    console.log($(this).width()); // 0
    $('body').append($(this));
    console.log($(this).width()); // 160
});

.
在绑定
'load'
事件后，是否尝试设置
.src
？可能会先将图像附加到主体，这有时会触发实际绘制。或者只使用
width
属性。有趣的信息，尽管它不是问题的根本原因；事件被触发。谢谢，我使用了你的代码，但是因为我需要img作为jquery对象，所以我喜欢：$（this.css（'width'，this.width）；$（this.css（'height'，this.height）；加载图像后。在此之后，我可以使用alert（$（this.width（））；正如我在回答中提到的，您执行
.onload=
和
.src=
的顺序很重要；首先附加加载处理程序，然后设置位置。在处理缓存图像时，这一点变得很明显。杰克，你说得对。但这并不能解决图像宽度问题。首先，我必须将css设置为$（this.css（'width'，this.width））；或者将图像附加到主体。然后我可以使用jquery width（）@abiku不，它不能解决问题，但是如果你做得不对，它会导致一些问题：-）谢谢你的帮助。我需要将此图像作为jquery对象，因为我将其传递给其他javascript函数，该函数需要jquery img object作为参数，并且我无法更改此函数。无论如何，提供jquery对象都不会有问题。
var img = new Image();
img.src = 'http://jsfiddle.net/img/logo.png';
$(img).on('load', function() {
    console.log(this.width); // 160
    console.log($(this).context.width); // 160
    console.log($(this).width()); // 0
    $('body').append($(this));
    console.log($(this).width()); // 160
});