jquery - jquery img width() 给出 0

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 演示

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

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

或者使用纯 JS：

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

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

Answer 2

直到您将imagein 附加到 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
});

检查这个。

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

不知道为什么需要它，因为在渲染时浏览器已经知道图像有多大，这与向<img />DOM添加

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