我尝试使用 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 事件,我可以使用它来指定加载图像时的回调函数。
我想知道这样做是否是最好的方法。例如,假设我只需要有关图像的一些信息但不需要显示它,并且我想在客户端管理该信息。 我需要加载图像吗? 是否有其他方式获取此类信息?
最佳答案
您必须等待图像加载:
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”属性后的语句中可用。
它有时会起作用,因为您的图片可能已被缓存。
关于javascript - 获取图像信息的最佳实践,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13530811/