在需要知道图像的高度和宽度的情况下“延迟加载”图像的最佳方式是什么？
What's the best way to `lazy load` images while needing to know their height and width?
我正在尝试 'lazy load' 动态图像。它们的 height/width 比例在网页布局中很重要。我有四个选项来防止它们在加载或渲染时弄乱 DOM。
我可以使用 Javascript 获取图像的高度和宽度，在 DOM 中设置一个元素来放置图像，直到我想加载它之后。我会用...
var image = new Image();
var width = image.width;
var height = image.height;
我不能简单地延迟加载它们并立即使用带有 src 的 img 标签。如果#1 与此方法一样慢，那么即使稍后尝试加载它们也没有意义，我也可以在 HTML 标记中进行加载。
<img src='source' />
我可以将图像尺寸存储在我的数据库中。这意味着我将持续拥有必要的图像尺寸，并且可以很容易地设置占位符。我不知道这是否是常见的做法。 编辑：请注意，我正在访问数据库以检索图像 url 无论如何。
<div>this elements width and height is set</div>
我可以通过PHP得到图像的尺寸。这与 Javascript 方法相同，只是在过程中的不同点。
$size = getimagesize($filename);
我的问题本质上是以上哪一种是获取图片宽度和高度以在 DOM 中存储位置的最成熟方法？
我想说方法 2 和方法 3 的组合是你最好的选择。您应该 将图像大小和其他元数据存储在描述图像的表中。然后，您可以执行某种形式的动态加载，或者只是放置一堆 <img> 标签，其中 width 和 height 已经设置为来自数据库的大小和 decoding=async因此浏览器不会在加载这些图像时阻止页面的其余部分。
最终状态是向浏览器发送一个文档，其中包含您希望显示的图像的清晰列表，以及尽可能多的关于它们的信息（尺寸、加载模式、各种屏幕密度的各种 src 等）。
方法 1 似乎需要做很多工作，其中大部分会重复浏览器已经在做的事情。
方法 4 将是一场性能噩梦。 getimagesize 需要访问磁盘并读取您要显示的每个图像的某些部分。如果有一组众所周知的图像，你会被磁盘缓存保存，但否则，如果你正在做类似 instagram/facebook/flickr 的事情，每个用户都有自己的图像，你会看到 O(n) 随机磁盘读取任何 I/O 数据库所做的事情。
我正在尝试 'lazy load' 动态图像。它们的 height/width 比例在网页布局中很重要。我有四个选项来防止它们在加载或渲染时弄乱 DOM。
我可以使用 Javascript 获取图像的高度和宽度，在 DOM 中设置一个元素来放置图像，直到我想加载它之后。我会用...
var image = new Image(); var width = image.width; var height = image.height;我不能简单地延迟加载它们并立即使用带有
src的img标签。如果#1 与此方法一样慢，那么即使稍后尝试加载它们也没有意义，我也可以在 HTML 标记中进行加载。<img src='source' />我可以将图像尺寸存储在我的数据库中。这意味着我将持续拥有必要的图像尺寸，并且可以很容易地设置占位符。我不知道这是否是常见的做法。 编辑：请注意，我正在访问数据库以检索图像 url 无论如何。
<div>this elements width and height is set</div>我可以通过PHP得到图像的尺寸。这与 Javascript 方法相同，只是在过程中的不同点。
$size = getimagesize($filename);
我的问题本质上是以上哪一种是获取图片宽度和高度以在 DOM 中存储位置的最成熟方法？
我想说方法 2 和方法 3 的组合是你最好的选择。您应该 将图像大小和其他元数据存储在描述图像的表中。然后，您可以执行某种形式的动态加载，或者只是放置一堆 <img> 标签，其中 width 和 height 已经设置为来自数据库的大小和 decoding=async因此浏览器不会在加载这些图像时阻止页面的其余部分。
最终状态是向浏览器发送一个文档，其中包含您希望显示的图像的清晰列表，以及尽可能多的关于它们的信息（尺寸、加载模式、各种屏幕密度的各种 src 等）。
方法 1 似乎需要做很多工作，其中大部分会重复浏览器已经在做的事情。
方法 4 将是一场性能噩梦。 getimagesize 需要访问磁盘并读取您要显示的每个图像的某些部分。如果有一组众所周知的图像，你会被磁盘缓存保存，但否则，如果你正在做类似 instagram/facebook/flickr 的事情，每个用户都有自己的图像，你会看到 O(n) 随机磁盘读取任何 I/O 数据库所做的事情。