1

我尝试使用 JQuery 广告将图像加载到 HTML 元素中，并使用图像属性来做其他事情。我试图做的是这样的：

var img = new Image();
img.src = "icon.png";
var width = img.width;
var height = img.height;
$("#element").css("background-image", "url(" + img.src + ")");
//use width and height...

它在大多数情况下都有效，但我发现有时“宽度”和“高度”设置为 0。进行一些搜索时，我发现图像加载是一项异步工作，所以碰巧我尝试读取属性时它是仍然没有加载。我发现有一个 onLoad 事件可用于在加载图像时指定回调函数。

我想知道这是否是做这些事情的最好方法。例如，假设我只需要有关图像的一些信息，但不需要显示它，并且我想管理该信息客户端。我需要加载图像吗？是否有其他方法可以获取此类信息？

4

1 回答 1

6

您必须等待加载图像：

var img = new Image();
img.onload = function() {
  var width = img.width;
  var height = img.height;
  $("#element").css("background-image", "url(" + img.src + ")");
};
img.src = "icon.png";

因为必须从分配给“src”属性的 URL 中获取图像，所以该操作被异步处理。也就是说，您不能保证图像将可用于分配“src”属性后的语句。

它有时会起作用，因为您的图像可能被缓存。

于 2012-11-23T14:13:50.787 回答