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

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 属性获取图像的高度和宽度。

在不加载图像的情况下获取图像的高度和宽度的唯一方法是将该信息保存在您可以使用脚本或在脚本中访问的位置。