Javascript 使用JS/jQuery获取未显示图像的宽度

请看一下

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

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

本地（图像保存到我的硬盘上）是一样的

---

有人有什么建议吗？

你会定期得到

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

以下是我使用清除的浏览器缓存获得的输出示例，当我转到：

为什么挂起事件只是为了在事件发生后立即将其删除？因为尽管JavaScript在web浏览器中只有一个主UI线程，但web浏览器本身是多线程的。如果我们先检查

this.complete

，这将是一个完全有效的序列：

我们检查它并看到

false

浏览器完成加载图像，查看是否有任何加载处理程序供其排队，查看没有，因此不将任何处理程序调用排队

我们的下一条线路是连接事件

---

…意味着我们没有收到任何关于图像的通知。这与如果动态添加图像，则在设置

src

之前必须钩住

load

的原因相同。

非常感谢。我已经假设过了，但我不确定。非常好的例子，感谢您对方法的详细解释。

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