如何在影像載入前為可變大小的影像預留空間，以防止佈局變更？

Question

我有一個包含文字、圖片標籤和一些文字的html頁面，如下所示：

這是圖像之前的文字。

    <img src="image.jpeg"/>


這是圖像之後的文字。 

現在當頁面加載時，由於圖像加載需要更長的時間，文字會在圖像之前加載。因此會出現佈局變化，即圖像之後的文字會緊接在圖像之前的文字後面，如果圖像尚未加載，則不會為圖像預留任何空間。然而，當圖像載入完成後，圖像之後的文字會移到下方，即佈局發生變化。如何在圖像加載之前為圖像預留空間，以避免佈局變化？此外，圖像標籤中可以包含任何圖像，並且圖像大小也是動態的。頁面上必須顯示原始大小的圖像。此外，由於我正在使用伺服器端渲染，我事先知道要顯示的圖像的大小。我不能固定圖像的高度和寬度，因為這會導致圖像在顯示大小更改時出現問題，圖像將不再適應螢幕的大小。

Answer 1

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

 <h2 class="before">This is text before</h2>
 <div class="image-container">
  <img class="image" src="https://images2.minutemediacdn.com/image/fetch/w_850,h_560,c_fill,g_auto,f_auto/https%3A%2F%2Fwinteriscoming.net%2Ffiles%2F2021%2F11%2FCaraxes-850x560.jpeg" alt="">
 </div>
 <h2 class="after">This is text after</h2>