如何在图片加载之前使用JavaScript获取图片的宽度和高度？

Question

我想知道在图片加载之前是否有可能获取其尺寸（宽度和高度）？不幸的是，我无法使用类似这样的代码：

$('img').load(function() {
    alert(this.width + ' ' + this.height);
});

当图片加载时，我不能等待，我需要在开始时知道图片的尺寸。

是否可能实现这个功能，或者我应该使用PHP中的getimagesize()函数，并将其传递到HTML中？

- pronngo

---

在加载图像之前为什么需要知道尺寸？有些东西告诉我有更好的方法（比如预先缓存图像），但这取决于你实际想要做什么。 - T.J. Crowder

Answer 1

你无法获取图片的尺寸，因为浏览器只有在加载完成后才会报告其尺寸。你需要从服务器端获取信息或改变方法，以便在不需要在加载前知道尺寸的情况下进行操作。

如果你只需要在将图片放入页面之前知道其大小（而不是真正意义上的在加载之前），你可以这样做：

img = new Image();
img.onload = function() {
  // Here, you can reliably use `width` and `height`
  display("Loaded, size is " + this.width + "x" + this.height);
};
img.src = "the/path/to/the/image/goes/here";

实时示例

在设置 src 之前挂钩 load 事件非常重要，以防图像已经缓存且事件立即触发。

(我不赞成使用 DOM0 样式的处理程序，但它们在快速示例中很有用。)

- T.J. Crowder

Answer 2

我想不出任何真正的理由，为什么您不能加载图像并在将其放置在文档中之前计算出其高度。 您可以等待图像加载完成。 如果您无法这样做，则完全设计了错误的应用程序。（以非评判的方式 :)）

- Layke

---

引用的代码不可靠。必须等待图像加载完毕后再查询其大小。 - T.J. Crowder

瀑布流布局屏幕上要显示太多的图片，因此只有在到达某个特定区域时才进行重载。是否可行？ - cregox