Javascript:可以在图像完全加载之前获取图像尺寸

Javascript: Possible to get image dimensions before images are fully loaded?

本文关键字：图像获取加载 Javascript 更新时间：2023-09-26

我正在构建一个移动版本的网站，其中页面数据加载非常快，但由于页面上的图像很大，随着时间的推移，它们进入的速度会更慢。

问题是，当图像慢慢进入时，它们会将页面的内容向下推，从而使用户失去阅读位置。

我想做的是确定这些图像的大小，然后为图像留下一个大小正确的黑色占位符，该占位符将在加载图像时填充图像。这样，当图像打开时，用户的阅读体验就不会受到影响。

我想知道是否可以在图像加载之前用javascript或html5获取图像的尺寸，然后在图像完全加载之前用jscript/html5为初始页面加载上的标签设置宽度和高度属性。

谢谢！

*编辑：我无法立即使用宽度和高度HTML属性，因为图像来自所有不同的来源，没有预先已知的宽度和高度（其大部分是随机用户发布的图像）

这就是height和width属性在<img />元素上的作用。将这些设置为图像的高度/宽度，该空间将由渲染器保留。

否则，你将陷入鸡和蛋的境地；你无法神奇地找到图像的大小；你需要先下载它！