Question

请查看 jsFiddle

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

有些是零。我不知道为什么会这样。它总是不同的。如果你有时刷新小提琴（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)");
    });
}

Updated Fiddle

以下是我使用已清除的浏览器缓存获得的输出示例，当我转到the embedded version of that fiddle时：

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

Fiddle

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

我们检查并查看false
浏览器完成加载图像，查看是否有任何加载处理程序让它排队，看不到，所以不排队任何处理程序调用
我们的下一行是为了挂钩事件

...意味着我们没有收到图片的任何通知。如果动态添加图片，那么在设置load之前必须始终挂钩src的原因相同。

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

1 个答案: