Comment puis-je précharger les images d'arrière-plan CSS pour éviter une apparition retardée ?

Préchargement des images CSS

Pour résoudre le problème de l'apparition retardée des images d'arrière-plan CSS dans un formulaire de contact basculé, il est crucial de précharger ces images efficacement. Une méthode pour y parvenir consiste à utiliser CSS seul.

L'extrait de code suivant montre comment précharger des images CSS en utilisant un élément aléatoire (ici, l'élément ) comme cible :

body::after {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  z-index: -1; /* hide images */
  content: url(img1.png) url(img2.png) url(img3.gif) url(img4.jpg); /* load images */
}

Dans ce code, le pseudo-élément ::after est utilisé pour charger plusieurs images simultanément. En ajustant les propriétés de position et d'index z, ces images restent masquées, ce qui les empêche de s'afficher sur la page Web. Par conséquent, lorsque le div contenant est basculé, les images sont déjà chargées et apparaissent instantanément.

À des fins de démonstration, voir ce qui suit :

<!-- Example usage -->
<div onclick="toggleDiv()">Toggle Me</div>

<div>

De plus, il est recommandé d'utiliser images de sprite pour minimiser les requêtes HTTP et garantir que les images sont hébergées sur un serveur prenant en charge HTTP2. Cette approche améliore les performances globales et garantit une expérience utilisateur transparente.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!