Bagaimanakah saya boleh menempah ruang untuk imej bersaiz berubah-ubah sebelum ia dimuatkan untuk mengelakkan perubahan reka letak?

Question

Saya mempunyai halaman html yang mengandungi teks, tag imej dan beberapa teks seperti ini:

Ini ialah teks sebelum imej.

    


Ini adalah teks selepas imej. 
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. 

Answer 1

1- Masukkan imej anda ke dalam bekas.

2- Berikan bekas width 和 height，以及一个固定的 min-height 和 min-width tetap, yang boleh ditetapkan mengikut keperluan anda atau resolusi imej.

Itu sahaja.

Jangan risau tentang kod js, saya cuma mahu tunjukkan imej selepas 3 saat untuk membantu anda memahami maksud saya.

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>