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

Question

我想知道在加载之前是否可以获得图像的尺寸(宽度和高度)？不幸的是我不能使用像这样的代码:

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

我迫不及待地想要加载图像,我需要知道在开始时图像的大小.

是否可以或应该使用PHP和getimagesize()函数并将其传递给HTML？

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

实例

如果图像位于缓存中并且事件立即触发,则在设置之前挂钩load事件非常重要.src

(我不主张使用DOM0样式处理程序onload,但它们在快速示例中很有用.)