<p>J'ai une page HTML contenant du texte, des balises d'image et du texte comme celui-ci : </p> <pre class="brush:php;toolbar:false;">Ceci est le texte avant l'image. <img src="image.jpeg"/> C'est le texte après l'image. ≪/pré> <p>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. </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>