我正试图'懒加载'动态图像。它们的高/宽比在网页的布局中很重要。我有四个选项可以防止它们在加载或渲染时弄乱DOM。
我可以使用Javascript获取图像的高度和宽度，在DOM中设置一个元素以保留图像，直到我想稍后加载它。我会用......
var image = new Image();
var width = image.width;
var height = image.height;
我可以毫不懒惰加载它们并立即使用img标记src。如果＃1和这个方法一样慢，那么以后尝试加载它们就没有意义了，我也可以在HTML标签中进行加载。
<img src='source' />
我可以将图片尺寸存储在我的数据库中。这意味着我会不断拥有图像的必要尺寸，并且可以很容易地设置占位符。我不知道这是否是常见做法。 编辑：应该注意，我正在访问数据库以检索图像网址。
<div>this elements width and height is set</div>
我可以通过PHP获取图像的尺寸。这与Javascript方法相同，只是在流程的不同点。
$size = getimagesize($filename);
我的问题基本上是上面哪一种获取图片宽度和高度以便在DOM中存储地点的最完善的方式？
答案 0 :(得分：1)
我会说方法2和3的组合是你最好的赌注。您应将图像大小和其他元数据存储在描述图像的表中。然后，您可以执行某种形式的动态加载，或者只放置一堆<img>标记，width和height已经设置为数据库和decoding=async的大小所以浏览器在加载这些图像时不会阻止页面的其余部分。
最终状态是将文档发送到浏览器，其中包含您希望显示的清晰图像列表，以及尽可能多的关于它们的信息（大小，加载模式，各种屏幕密度的各种srcs等）。
方法1似乎需要做很多工作，其中大部分都会复制浏览器已经在做的事情
方法4将是一场表演噩梦。 getimagesize需要访问磁盘并读取您尝试显示的每个图像的某些部分。如果有一组众所周知的图像，你将被磁盘缓存保存，但是，如果你正在做一些像instagram / facebook / flickr这样的东西，每个用户都有自己的图像，你会看到{{1}随机磁盘读取数据库所做的任何I / O顶上。