<p>Saya mempunyai halaman html yang mengandungi teks, tag imej dan beberapa teks seperti ini: </p> <pre class="brush:php;toolbar:false;">Ini ialah teks sebelum imej. <img src="image.jpeg"/> Ini adalah teks selepas imej. </pra> <p>Kini apabila halaman dimuatkan, teks dimuatkan sebelum imej kerana imej mengambil masa yang lebih lama untuk dimuatkan. Jadi akan berlaku perubahan reka letak di mana teks selepas imej akan serta-merta mengikuti teks sebelum imej, dan jika imej belum dimuatkan lagi, tiada ruang akan dikhaskan untuk imej. Walau bagaimanapun, apabila imej dimuatkan, teks yang mengikuti imej bergerak ke bawah, iaitu reka letak berubah. Bagaimanakah saya boleh menempah ruang untuk imej sebelum ia dimuatkan untuk mengelakkan perubahan reka letak? Selain itu, sebarang imej boleh disertakan dalam teg imej, dan saiz imej juga dinamik. Saiz asal imej mesti dipaparkan pada halaman. Selain itu, kerana saya menggunakan pemaparan sebelah pelayan, saya tahu terlebih dahulu saiz imej yang ingin saya paparkan. Saya tidak dapat membetulkan ketinggian dan lebar imej kerana ini akan menyebabkan masalah apabila saiz paparan berubah dan imej tidak lagi sesuai dengan saiz skrin. </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>