Question

我尝试使用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事件可用于在加载图像时指定回调函数。

我想知道这是否是做这些事情的最佳方式。例如，假设我只需要一些关于图像的信息，但我不需要显示它，我想管理那个信息客户端。我需要加载图片吗？还有其他方法可以获得这些信息吗？

Answer 1

您必须等待加载图像：

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”属性后该图像可用于该语句。

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

获取图像信息的最佳做法

1 个答案: