Wie kann ich vor dem Laden Platz für ein Bild variabler Größe reservieren, um Layoutänderungen zu verhindern?

Question

Ich habe eine HTML-Seite mit Text, Bild-Tags und etwas Text wie diesem:

Dies ist der Text vor dem Bild.

    <img src="image.jpeg"/>


Dies ist der Text nach dem Bild. 

Jetzt wird beim Laden der Seite der Text vor den Bildern geladen, da das Laden der Bilder länger dauert. Daher wird es eine Layoutänderung geben, bei der der Text nach dem Bild unmittelbar auf den Text vor dem Bild folgt. Wenn das Bild noch nicht geladen wurde, wird kein Platz für das Bild reserviert. Beim Laden des Bildes verschiebt sich jedoch der dem Bild folgende Text nach unten, d. h. das Layout ändert sich. Wie kann ich vor dem Laden Platz für ein Bild reservieren, um Layoutänderungen zu vermeiden? Darüber hinaus kann jedes Bild in den Bild-Tag eingebunden werden und auch die Bildgröße ist dynamisch. Auf der Seite muss die Originalgröße des Bildes angezeigt werden. Da ich serverseitiges Rendering verwende, weiß ich außerdem im Voraus, welche Größe das Bild haben soll, das ich anzeigen möchte. Ich kann die Höhe und Breite des Bildes nicht festlegen, da dies zu Problemen führt, wenn sich die Anzeigegröße ändert und das Bild nicht mehr auf die Bildschirmgröße passt.

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>