Préchargement d'image CSS uniquement - Astuces CSS

Une grande raison d'utiliser le préchargement d'image est si vous souhaitez utiliser une image pour l'image d'arrière-plan d'un élément sur un événement mouseOver ou: hover. Si vous n'appliquez cette image d'arrière-plan dans le CSS que pour l'état: hover, cette image ne se chargera pas avant le premier événement: hover et il y aura donc un court délai ennuyeux entre le passage de la souris sur cette zone et l'image qui apparaît .

Technique n ° 1

Chargez l'image sur l'état normal de l'élément, décalez-la uniquement avec la position d'arrière-plan. Déplacez ensuite la position de l'arrière-plan pour l'afficher en survol.

#grass ( background: url(images/grass.png.webp) no-repeat -9999px -9999px; ) #grass:hover ( background-position: bottom left; )

Technique n ° 2

Si l'élément en question a déjà une image d'arrière-plan appliquée et que vous devez changer cette image, ce qui précède ne fonctionnera pas. En règle générale, vous optez pour un sprite ici (une image d'arrière-plan combinée) et déplacez simplement la position d'arrière-plan. Mais si ce n'est pas possible, essayez ceci. Appliquez l'image d'arrière-plan à un autre élément de page qui est déjà utilisé, mais qui n'a pas d'image d'arrière-plan.

#random-unsuspecting-element ( background: url(images/grass.png.webp) no-repeat -9999px -9999px; ) #grass:hover ( background: url(images/grass.png.webp) no-repeat; )

L'idée de créer de nouveaux éléments de page à utiliser pour cette technique de préchargement peut vous venir à l'esprit, comme # preload-001, # preload-002, mais c'est plutôt contraire à l'esprit des standards du Web. D'où l'utilisation d'éléments de page qui existent déjà sur votre page.

J'ai eu l'idée d'essayer d'utiliser le même élément, d'utiliser uniquement la classe: after pseduo-class pour charger l'image, vous n'avez donc pas besoin de vous fier à ce qu'il y ait suffisamment d'images superflues sans arrière-plan sur votre page pour travailler avec, mais pour une raison quelconque, je ne voulais pas les précharger correctement.