页面加载后获取图像尺寸

Question

我有一个项目需要获取徽标的尺寸并相应地调整其位置。据我所知，页面上的所有元素都应该在$(document).ready或onload事件发生后立即使用。我还尝试将脚本放在关闭的body标签之前，以确保我可以获得所有内容。我使用jQuery $(element).width和$(element).height来衡量徽标图片。

但是，我不是每次都获得这些值：我控制记录这两个值。有时，它显示零，我猜测图像标记已加载，但实际图像仍在加载。我很困惑，因为我在线搜索，他们都说如果我准备好使用DOM或者最后放入脚本标签，所有元素都应该准备就绪。

Answer 1

试试这个

$('#img').load(function() {
// Handler for .load() called.
});

Answer 2

  

页面上的所有元素应该可以在$（document）.ready或onload事件之后立即使用。我还尝试将脚本放在关闭的body标签之前，以确保我可以获得所有内容。

不，$(document).ready事件。将脚本作为最后一个元素嵌入到body中只能保证DOM结构已经建立。这样做不意味着任何元素引用的外部资源已经完成加载 - 唯一保证load事件的事件。

jQuery文档明确警告组合$(document).ready和“旧学校”加载事件处理（意思是on body或window.onload上的onload属性） - 所以你应该使用.on('load', handler)代替。但要注意文档中提到的关于图像的洞穴。