Alleen CSS-afbeelding vooraf laden - CSS-trucs

Een belangrijke reden om het vooraf laden van afbeeldingen te gebruiken, is als u een afbeelding wilt gebruiken voor de achtergrondafbeelding van een element op een mouseOver- of: hover-gebeurtenis. Als je die achtergrondafbeelding in de CSS alleen toepast voor de: hover-status, wordt die afbeelding pas geladen bij de eerste: hover-gebeurtenis en zal er dus een korte vervelende vertraging zijn tussen de muis die over dat gebied gaat en de afbeelding die daadwerkelijk wordt weergegeven .

Techniek # 1

Laad de afbeelding in de normale staat van het element, verschuif deze alleen met de achtergrondpositie. Verplaats vervolgens de achtergrondpositie om deze bij zweven weer te geven.

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

Techniek # 2

Als op het betreffende element al een achtergrondafbeelding is toegepast en u die afbeelding moet wijzigen, werkt het bovenstaande niet. Meestal zou je hier voor een sprite gaan (een gecombineerde achtergrondafbeelding) en gewoon de achtergrondpositie verschuiven. Maar als dat niet mogelijk is, probeer dit dan. Pas de achtergrondafbeelding toe op een ander pagina-element dat al in gebruik is, maar geen achtergrondafbeelding heeft.

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

Het idee om nieuwe pagina-elementen te maken om voor deze preload-techniek te gebruiken, kan in je opkomen, zoals # preload-001, # preload-002, maar dat is nogal tegen de geest van webstandaarden. Vandaar het gebruik van pagina-elementen die al op uw pagina staan.

Ik had het idee om hetzelfde element te proberen en te gebruiken, gebruik alleen de: after pseduo-class om de afbeelding te laden, dus je hoefde er niet op te vertrouwen dat er genoeg externe achtergrondvrije afbeeldingen op je pagina waren om mee te werken, maar wilde ze om wat voor reden dan ook niet correct laden.