Wie kann man Bilder nur mit CSS (ohne JS) vorladen?

Question

Wie kann ich Bilder nur mit CSS, also ohne JavaScript, vorladen? Es muss browserübergreifend sein.

Ich möchte keine CSS-Sprites verwenden. Gibt es eine andere Lösung?

Answer 1

Utilice CSS-Sprites .

Answer 2

Sie können mehrere Elemente verwenden, die mit background-position: -1000px -1000px; und geben ihnen eine background-image für jedes Bild, das Sie vorladen möchten.

• Hier können Sie mehr lesen

Answer 3

Sie könnten versuchen, sie alle vor dem abschließenden Body-Tag zu laden und sie nicht anzuzeigen. Wenn Sie sie dann später aufrufen, sollten sie im Cache sein, wenn Sie genau denselben Pfad verwenden.

<img src="/i/myimage.jpg" alt="image preload" style="display:none;" />

Sie können auch eine Klasse mit display:none erstellen und diese auf alle Bilder anwenden, die Sie ebenfalls vorladen möchten.

Dies würde allerdings mehr HTTP-Anfragen nach sich ziehen, und wenn Sie diese reduzieren wollen, schlage ich CSS-Sprites vor, falls Sie das jemals betrifft.