Javascript 什么'；当需要知道图像的高度和宽度时，最好的方法是什么？

我正在尝试“延迟加载”动态图像。它们的高宽比在网页的布局中很重要。我有四个选项可以防止它们在加载或渲染时弄乱DOM

我可以使用Javascript获取图像的高度和宽度，在DOM中设置一个元素来保持图像，直到我想稍后加载它。我会用

var image=newimage（）；
var-width=image.width；
var height=image.height

我不能懒洋洋地加载它们，并立即使用带有

src

的

img

标记。如果#1的速度和这个方法一样慢，那么以后再加载它们就没有意义了，我也可以在HTML标记中这样做

我可以在数据库中存储图像尺寸。这意味着我将持续拥有图像的必要尺寸，并且可以很容易地设置占位符。但我不知道这是否是普遍的做法。编辑：应该注意，我正在访问数据库以检索图像url

此元素的宽度和高度已设置

我可以通过PHP获得图像的尺寸。这与Javascript方法相同，只是在过程中的不同点

$size=getimagesize（$filename）

---

我的问题是，上面哪种方法是获得图片宽度和高度以在DOM中存储位置的最成熟方法？

我认为方法2和3的组合是最好的选择。您应该在描述图像的表中存储图像大小和其他元数据。然后，您可以执行某种形式的动态加载，或者只放置一堆

方法1似乎需要做很多工作，其中大部分工作都会重复浏览器已经在做的工作。

方法4将是一场性能噩梦
getimagesize
需要访问磁盘并读取您试图显示的每个图像的某些部分。如果有一组众所周知的图像，你会被磁盘缓存保存，但是，如果你在做像instagram/facebook/flickr这样的事情，每个用户都有自己的图像，你会看到
O（n）
随机磁盘读取在数据库的任何I/O上。
我想这就是我倾向的方向。我发现用元数据将所有图像引用存储在它们自己的表中有很多优点。当我使用PHP方法时，我确实注意到了性能的巨大下降，所以我很高兴您指出了原因。谢谢你的帮助。你把我推向了正确的方向。