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