javascript - 从 Javascript Image() 元素构造函数获取图像属性

Question

我正在使用new Image()来预加载图像，如下所示:

function preload() {
  var imgs = [];
  for (i = 0; i < arguments.length; i++) {
    imgs[i] = new Image();
    imgs[i].src = arguments[i];
  }
return imgs;
}

//function being called like so
var paths = ["../images/image01.jpg","../images/image02.jpg", ...];
var images = preload.apply(null, paths);

这将返回一个 img 对象数组...当使用 console.log() 显示时，所有属性都会被清空

我的问题是 - 如何获取每个预加载图像的宽度和高度？

或者甚至更多 - 是否有可能以某种神秘的方式更早地获得这些尺寸(某种预读-预加载-预图像)，这样我就可以创建那些预加载的图像特定尺寸？

如果我不明白“这些东西是如何工作的”的一些明显的东西，我很抱歉，这种情况经常发生在我身上。

仅供澄清

正如@Waterscroll指出的，加载图像需要时间，因此必须在.onload事件发生时获取图像属性。稍后，图像可以通过一些回调函数来处理。

请随意查看其他答案，因为它们展示了针对该主题的更实用的方法。

如果我可以添加一些东西 - 在某些情况下存储图像尺寸(即在数据库中)可能是有益的。在这个特定的脚本中，我从数据库获取文件路径，因此我也可以使用图像的大小来做到这一点。

Answer 1

设置src属性后，图像加载需要一段时间。在某些浏览器中，您可以使用 load 事件来了解图像何时已加载，在不支持该事件的浏览器中，您可以使用complete 属性来检查图像是否已加载。加载图像后，您应该能够通过naturalHeight和naturalWidth属性获取图像的高度和宽度。

在不加载图像的情况下获取图像的高度和宽度的唯一方法是将这些信息保存在您可以通过脚本访问的位置或脚本内部。