Comment puis-je réserver de l'espace pour une image de taille variable avant son chargement afin d'éviter les modifications de mise en page ?

Question

J'ai une page HTML contenant du texte, des balises d'image et du texte comme celui-ci :

Ceci est le texte avant l'image.

    


C'est le texte après l'image. ≪/pré>
Désormais, lorsque la page se charge, le texte se charge avant les images, car celles-ci mettent plus de temps à se charger. Il y aura donc un changement de mise en page où le texte après l'image suivra immédiatement le texte avant l'image, et si l'image n'est pas encore chargée, aucun espace ne sera réservé pour l'image. Cependant, lorsque l'image est chargée, le texte qui suit l'image se déplace vers le bas, c'est-à-dire que la mise en page change. Comment puis-je réserver de l'espace pour une image avant son chargement afin d'éviter les modifications de mise en page ? De plus, n'importe quelle image peut être incluse dans la balise d'image et la taille de l'image est également dynamique. La taille originale de l'image doit apparaître sur la page. De plus, comme j'utilise le rendu côté serveur, je connais à l'avance la taille de l'image que je souhaite afficher. Je ne peux pas fixer la hauteur et la largeur de l'image car cela posera des problèmes lorsque l'image sera affichée dans une taille qui change, l'image ne s'adaptera plus à la taille de l'écran. 

Answer 1

1- Mettez votre image dans un conteneur.

2- Donnez au conteneur un width 和 height，以及一个固定的 min-height 和 min-width fixe, qui peut être réglé en fonction de vos besoins ou de la résolution de l'image.

C'est tout.

Ne vous inquiétez pas pour le code js, je veux juste afficher l'image après 3 secondes pour vous aider à comprendre ce que je veux dire.

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>