Wie lade ich Bilder vor, die nur beim Schweben verwendet werden?

14

Ich habe einen Link, der mit einem Hintergrundbild beginnt und sich dann beim Hover-Vorgang zu einem anderen ändert. Beide Hintergrundbilder werden im CSS gesetzt. Meine Browser (einer von ihnen) scheinen das Hover-Bild erst dann zu laden, wenn Sie tatsächlich den Mauszeiger bewegen. Aber dann haben Sie für einige Sekunden (bei meiner sehr langsamen Verbindung) ein leeres Bild, das zum Laden des neuen benötigt wird. Gibt es eine Möglichkeit, den Browser zu ermutigen, das Hover-Bild vorab zu laden, damit beim Hover keine Verzögerungszeit auftritt?

css images load-time Daniel Bingham
quelle

Antworten:

17

1) Verwenden Sie CSS-Sprites (Dies ist die bevorzugte Methode).

2) Laden Sie die Bilder in ein verstecktes Div. Platziere die Bilder im div und stelle dann das CSS des div so ein, dass display: none;es ausgeblendet wird.

3) Lade die Bilder mit CSS :

#preloadedImages
{
    width: 0px;
    height: 0px;
    display: inline;
    background-image: url(path/to/image1.png);
    background-image: url(path/to/image2.png);
    background-image: url(path/to/image3.png);
    background-image: url(path/to/image4.png);
    background-image: url();

}

4) Verwenden Sie dieses JavaScript

<script language="JavaScript">

function preloader() 
{
     // counter
     var i = 0;

     // create object
     imageObj = new Image();

     // set image list
     images = new Array();
     images[0]="image1.jpg"
     images[1]="image2.jpg"
     images[2]="image3.jpg"
     images[3]="image4.jpg"

     // start preloading
     for(i=0; i<=3; i++) 
     {
          imageObj.src=images[i];
     }
}
</script>
John Conde
quelle
Gibt es eine Möglichkeit, sie nach dem Laden der Seite zu laden? Der Benutzer sieht also keinen Ladekreis auf dem Cursor? Ein Weg wäre, einen versteckten Rahmen zu haben, der Javascript verwendet, um den anzuzeigenden versteckten Rahmen zu verzögern, wie in meiner Frage stackoverflow.com/questions/13437091/…, aber es gibt eine bevorzugte Methode, um den Ladekreis auf diesem Cursor zu verzögern und nicht anzuzeigen ?
Riseagainst
Trotzdem fand ich diese perishablepress.com/3-ways-preload-images-css-javascript-ajax und sie funktioniert einwandfrei mit Zeitverzögerung.
Riseagainst
10

Ich mag die Javascript-Lösung nicht wirklich - sie ist chaotisch, schwierig zu warten und scheitert natürlich vollständig, wenn JS deaktiviert ist.

Die moderne Lösung ist die Verwendung von CSS-Sprites - probieren Sie es aus, glauben Sie mir, Sie werden sich fragen, warum Sie das noch nie getan haben;)

dmp
quelle
0

Fügen Sie dies über Ihrem CSS hinzu:

<script type="text/javascript">
var images = ['img1.jpg', 'img2.jpg'];

for(var i = 0, len = images.length; i < len; i++) {
  new Image().src = images[i];
}
</script>
<link rel="stylesheet" type="text/css" href="your_css_file.css" />

Wenn Sie sich für die Sprite-Route entscheiden, wie von Danp vorgeschlagen, haben Sie immer noch ein Problem mit dem Laden des Sprites, bevor es benötigt wird. Das heißt, ich liebe Sprites; Um sie einfach zu machen, benutze ich das Spriteme-Tool von Steve Souders:

Nisse Engström
quelle