Comment le préchargement CSS peut-il optimiser l'affichage de l'image d'arrière-plan pour les éléments de formulaire masqués ?

Préchargement des images CSS

Dans une tentative d'optimisation de l'affichage d'un formulaire de contact masqué, un utilisateur rencontre un problème où les images d'arrière-plan CSS associées aux champs du formulaire apparaissent avec un retard notable. Pour résoudre ce problème, l'utilisateur utilise un script jQuery pour précharger les images.

Utilisation de CSS pour le préchargement d'images

Cependant, une solution plus efficace peut être obtenue en utilisant CSS seul .

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 attaché à l'élément body, qui est généralement présent sur chaque page Web.
• La position, la largeur et la hauteur sont définies sur 0 pour masquer visuellement les images.
• L'index z est défini sur -1 pour garantir que les images sont placées derrière le contenu visible.
• La propriété content est utilisée pour charger plusieurs images simultanément.

Avantages du préchargement CSS

Cette approche basée sur CSS offre plusieurs avantages :

• Elle simplifie le code et réduit le besoin de scripts supplémentaires.
• Il précharge les images en arrière-plan sans affecter la page. mise en page.
• Il élimine le besoin de charger les images individuellement, réduisant ainsi les requêtes HTTP.

Optimisation supplémentaire

Combinaison de plusieurs images dans un sprite peut réduire davantage les requêtes HTTP s'il existe de nombreuses images de petite taille. De plus, s'assurer que les images sont hébergées sur un serveur prenant en charge HTTP/2 peut améliorer leur vitesse de chargement.

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!