Ein wichtiger Grund für die Verwendung von Image Preloading ist, wenn Sie ein Bild für die Hintergrund-Bild eines Elements bei einem MouseOver- oder :hover-Ereignis verwenden möchten. Wenn Sie dieses Hintergrund-Bild nur im CSS für den :hover-Zustand anwenden, wird dieses Bild erst beim ersten :hover-Ereignis geladen, und somit gibt es eine kurze, ärgerliche Verzögerung zwischen dem Überfahren des Bereichs mit der Maus und dem tatsächlichen Erscheinen des Bildes.
Technik #1
Laden Sie das Bild im normalen Zustand des Elements, verschieben Sie es nur mit der Hintergrundposition. Bewegen Sie dann die Hintergrundposition, um es beim Hover anzuzeigen.
#grass { background: url(images/grass.png) no-repeat -9999px -9999px; }
#grass:hover { background-position: bottom left; }Technik #2
Wenn das betreffende Element *bereits* ein Hintergrundbild hat und Sie dieses Bild *ändern* müssen, funktioniert das obige nicht. Typischerweise würden Sie hierfür ein Sprite (ein kombiniertes Hintergrundbild) verwenden und nur die Hintergrundposition verschieben. Aber wenn das nicht möglich ist, versuchen Sie Folgendes: 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) no-repeat -9999px -9999px; }
#grass:hover { background: url(images/grass.png) no-repeat; }Die Idee, neue Seitenelemente für diese Preloading-Technik zu erstellen, wie #preload-001, #preload-002, könnte Ihnen in den Sinn kommen, aber das widerspricht eher dem Geist der Webstandards. Daher die Verwendung von Seitenelementen, die bereits auf Ihrer Seite vorhanden sind.
Ich hatte die Idee, dasselbe Element zu verwenden und nur die :after-Pseudoklasse zu nutzen, um das Bild zu laden, sodass Sie nicht auf genügend zusätzliche hintergrundfreie Bilder auf Ihrer Seite angewiesen sind, um damit zu arbeiten, aber aus irgendeinem Grund wollten Sie sie nicht richtig vorladen.
Mehr
Sehen Sie sich diesen Artikel an, um weitere Techniken, einschließlich JavaScript, zu erfahren.
Interessante Tipps oben. Früher habe ich JavaScript dafür verwendet, aber CSS-Preloads sind einfacher zu implementieren und vollständig browserkompatibel.
Eine andere Möglichkeit, Bilder mit CSS vorzuladen, finden Sie hier http://www.prismgraphicdesign.co.uk/blog/?p=12
Tony, Ihre Technik wird in modernen Browsern nicht funktionieren. Sowohl Inline- als auch Hintergrundbilder werden nicht geladen, wenn sie auf Elemente angewendet werden, deren Anzeige-Eigenschaft "none" ist.
Ich verstehe nicht.
Das hat bei mir einwandfrei funktioniert. Danke für die tolle Idee.
Sie können auch dies verwenden
Dies wird das Bild zwischenspeichern, bereit für die Verwendung, wo immer es benötigt wird.
Ich mag diese Lösung! Ich musste `position: absolute;` hinzufügen, um zu verhindern, dass das Pseudo-Element mein Layout durcheinanderbringt.
Dies schlägt für IE8 und darunter fehl, da :before/:after leider nicht unterstützt werden. Wenn Sie sich nicht darum kümmern, dass diese Versionen unterstützt werden, dann wird dies auch funktionieren.
Und im Beispiel von cnwtx, wenn wir "display:none;" statt "visibility:hidden;" verwenden... wird das Bild dann trotzdem gecached?
Vielen Dank im Voraus.
Offensichtlich – ja, funktioniert bei mir. Danke @cnwtx!
Ich kann diese Methode hier in den Kommentaren nicht einfügen, aber hier ist eine ausgezeichnete Methode, die ich gefunden habe
http://www.netmechanic.com/news/vol6/css_no18.htm
Was wäre, wenn Sie ein Div erstellen? Geben Sie ihm dann mehrere Hintergründe.
http://waytohtml5.blogspot.in/2013/07/preloader-using-css3-without-image.html
Technik #2, intelligent!
Danke cnwtx, Ihre Lösung hat bei mir perfekt funktioniert.
Ich verstehe nicht!
Gute Lösung, danke!
Basierend auf den obigen Lösungen.
Viele Browser unterstützen jetzt Multiple Backgrounds.
http://caniuse.com/#search=Multiple%20Backgrounds
Ich liebe diese Lösungen. Ich werde sie auf jeden Fall mal ausprobieren. Aber für mein Problem stehe ich immer noch ratlos da. Wie würde man das auf dieser Seite machen? Mein Rollover verwendet zwei Hintergrundbilder.