Nur CSS Image Preloading - CSS-Tricks

Inhaltsverzeichnis

Ein wichtiger Grund für das Vorladen von Bildern ist, wenn Sie ein Bild für das Hintergrundbild eines Elements in einem mouseOver- oder: hover-Ereignis verwenden möchten. Wenn Sie dieses Hintergrundbild im CSS nur für den Status: hover anwenden, wird dieses Bild erst beim ersten: hover-Ereignis geladen, und es tritt eine kurze störende Verzögerung zwischen der Maus, die über diesen Bereich fährt, und dem tatsächlich angezeigten Bild auf .

Technik # 1

Laden Sie das Bild in den regulären Zustand des Elements und verschieben Sie es nur mit der Hintergrundposition. Verschieben Sie dann die Hintergrundposition, um sie beim Hover anzuzeigen.

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

Technik Nr. 2

Wenn auf das betreffende Element bereits ein Hintergrundbild angewendet wurde und Sie dieses Bild ändern müssen, funktioniert das oben Gesagte nicht. Normalerweise wählen Sie hier ein Sprite (ein kombiniertes Hintergrundbild) und verschieben einfach die Hintergrundposition. Aber wenn das nicht möglich ist, versuchen Sie es. Wenden Sie das Hintergrundbild auf ein anderes Seitenelement an, das bereits verwendet wird, aber kein Hintergrundbild hat.

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

Die Idee, neue Seitenelemente für diese Vorladetechnik zu erstellen, kann in Ihrem Kopf auftauchen, wie z. B. # pretoad-001, # pretoad-002, aber das widerspricht eher dem Geist der Webstandards. Daher die Verwendung von Seitenelementen, die bereits auf Ihrer Seite vorhanden sind.

Ich hatte die Idee, zu versuchen, dasselbe Element zu verwenden und nur das: after pseduo-class zu verwenden, um das Bild zu laden, sodass Sie sich nicht darauf verlassen mussten, dass auf Ihrer Seite genügend fremdfreie Bilder vorhanden sind, um damit zu arbeiten. aber aus irgendeinem Grund wollte ich sie nicht richtig vorladen.