如何在图像加载前为可变大小的图像预留空间，以防止布局变化？

Question

我有一个包含文本、图像标签和一些文本的html页面，如下所示：这是图像之前的文本。<imgsrc="image.jpeg"/>这是图像之后的文本。现在当页面加载时，由于图像加载需要更长的时间，文本会在图像之前加载。因此会出现布局变化，即图像之后的文本会紧接在图像之前的文本后面，如果图像尚未加载，则不会为图像预留任何空间。然而，当图像加载完成后，图像之后的文本会移到下

P粉722409996 · Answer

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;
}

 This is text before
 
  
 
 This is text after