如何在图像加载前为可变大小的图像预留空间，以防止布局变化？
<p>我有一个包含文本、图像标签和一些文本的html页面，如下所示：</p>
<pre class="brush:php;toolbar:false;">这是图像之前的文本。
<img src="image.jpeg"/>
这是图像之后的文本。</pre>
<p>现在当页面加载时，由于图像加载需要更长的时间，文本会在图像之前加载。因此会出现布局变化，即图像之后的文本会紧接在图像之前的文本后面，如果图像尚未加载，则不会为图像预留任何空间。然而，当图像加载完成后，图像之后的文本会移到下方，即布局发生变化。如何在图像加载之前为图像预留空间，以避免布局变化？此外，图像标签中可以包含任何图像，并且图像大小也是动态的。页面上必须显示原始大小的图像。此外，由于我正在使用服务器端渲染，我事先知道要显示的图像的大小。我不能固定图像的高度和宽度，因为这会导致图像在显示大小更改时出现问题，图像将不再适应屏幕的大小。</p>
1
995
收藏
1- 将您的图像放入一个容器中。
2- 给容器一个固定的
width和height，以及一个固定的min-height和min-width，可以根据您的需要或图片的 分辨率 来设置。就是这样。
不用担心js代码，我只是为了在3秒后显示图像，以帮助您理解我的意思。
var image = document.querySelector(".image"); image.style.display = "none"; setTimeout(() => { image.style.display = "block"; }, 3000);.image-container { width: 350px; min-width: 350px; height: 250px; min-height: 250px; border: 1px solid red; } .image { width: 350px; min-width: 350px; height: 250px; min-height: 250px; }