javascript - `lazy load` 图像的最佳方法是什么，同时需要知道它们的高度和宽度？

Question

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

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

   var image = new Image(); var width = image.width; var height = image.height;

2. 我不能简单地延迟加载它们并使用 img带有 src 的标签立即地。如果 #1 与此方法一样慢，那么即使稍后尝试加载它们也没有意义，我也可以在 HTML 标记中进行加载。

   <img src='source' />

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

   <div>this elements width and height is set</div>

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

   $size = getimagesize($filename);

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

Answer 1

我认为方法 2 和方法 3 的组合是您的最佳选择。您应该将图像大小和其他元数据存储在描述图像的表中。然后你可以做某种形式的动态加载，或者只是放置一堆 <img>标签，带有 width和 height已经设置为来自 DB 和 decoding=async 的大小因此浏览器不会在加载这些图像时阻止页面的其余部分。 最终状态是向浏览器发送一个文档，其中包含您希望显示的图像的清晰列表，以及尽可能多的关于它们的信息(尺寸、加载模式、各种屏幕密度的各种 src 等)。

方法 1 似乎需要做很多工作，其中大部分会重复浏览器已经在做的事情。
方法 4 将是一场性能噩梦。 getimagesize将需要访问磁盘并读取您要显示的每个图像的某些部分。如果有一组众所周知的图像，你会被磁盘缓存保存，但否则，如果你正在做像 instagram/facebook/flickr 这样的事情，每个用户都有自己的图像，你会看到 O(n)随机磁盘读取数据库执行的任何 I/O。