<p>Ich habe eine HTML-Seite mit Text, Bild-Tags und etwas Text wie diesem: </p> <pre class="brush:php;toolbar:false;">Dies ist der Text vor dem Bild. <img src="image.jpeg"/> Dies ist der Text nach dem Bild. </pre> <p>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. </p>

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>