Question

奇怪的问题你知道为什么这段代码：

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

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

});

在Firefox，Chrome中为0，但在IE9中给出了正确的值？如何在所有浏览器中获得正确的价值？使用jQuery 1.8.2

Answer 1

jsBin demo

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

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

<强> Or with pure JS:

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

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

Answer 2

在您将image追加到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
});

Check this

Answer 3

根据jQuery文档http://api.jquery.com/load-event/

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

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

如果你查看文档中的注释，很多人都会遇到同样的问题，因为在webkit中没有触发load事件，通常是在src设置为相同之前...也许你想设置一个占位符图像然后更改src属性。

Answer 4

jQuery确定对象维度的方式是检查style属性（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添加<img />

顺便说一下，这些陈述的顺序很重要;您应该在设置.src属性之前注册加载处理程序，否则如果浏览器缓存了图像，您可能会错过加载事件。

jquery img width（）给出0

4 个答案:

jsBin demo