使用JS / jQuery获取未显示图像的宽度[关闭]

Question

请看看jsFiddle

运行它时，我想获取图像的宽度，但是得到以下值（在JS控制台中查看）

400 
0 
575 
533 
0
...

有些是零。 我不知道为什么会这样。 而且总是不同的。 如果几次刷新小提琴（F5），您将获得不同的宽度值。 有时正确的宽度，有时只是0。

本地（将图像保存到我的硬盘上）是相同的。

有人有什么建议吗？

Answer 1

由于要在测量图像之前不等待图像加载，因此会定期获得0 。 当您测量尚未加载的图像时，将返回0 。

如果更改显示宽度的代码以检查图像是否已加载，如果未加载则等待加载，您将看到非零宽度：

if (this.complete) {
    console.log($(this).width() + " (didn't have to wait)");
} else {
    $(this).one("load", function() {
        console.log($(this).width() + " (had to wait)");
    });
}

更新小提琴

当我转到该小提琴的嵌入式版本时，这是通过清除的浏览器缓存获得的输出示例：

400 (didn't have to wait)
575 (didn't have to wait)
533 (didn't have to wait)
452 (had to wait)
534 (had to wait)
375 (had to wait)

这是该代码的偏执狂版本，可能是我要采用的方法：

var img = $(this);
img.one("load.showcase", function() {
    console.log(img.width() + " (had to wait)");
});
if (this.complete) {
    img.off("load.showcase");
    console.log(img.width() + " (didn't have to wait)");
}

小提琴

为什么钩住事件后才立即将其删除？ 因为尽管JavaScript在Web浏览器中只有一个主UI线程，所以Web浏览器本身是多线程的。 如果我们检查this.complete 第一 ，这将是一个完全有效的序列：

1. 我们检查它并看到false
2. 浏览器完成图像加载，查看是否有任何加载处理程序供其排队，查看是否没有，因此不将任何处理程序调用排队
3. 下一行吸引事件

...意味着我们没有收到有关该图片的任何通知。 这是同一原因，如果动态添加图像，则必须在设置src之前始终挂接load 。