web-dev-qa-db-fra.com

Comment précharger des images utilisées uniquement en survol?

J'ai un lien qui commence par une image d'arrière-plan, puis passe en survol vers une autre. Les deux images de fond sont définies dans le CSS. Mes navigateurs (aucun d’eux) ne semblent charger l’image de survol tant que vous ne survolez pas. Mais vous vous retrouvez avec une image vide pendant plusieurs secondes (sur ma très lente connexion) nécessaire pour charger la nouvelle. Existe-t-il un moyen d’encourager le navigateur à pré-charger l’image de survol de manière à ce que le temps de retard ne survienne pas?

cssimagesload-time
14
Daniel Bingham

1) Utilisez CSS Sprites (C’est la méthode recommandée).

2) Chargez les images dans un div caché. Placez les images dans le div, puis définissez le code CSS du div sur display: none; pour le masquer.

3) Chargez les images avec 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) Utiliser ce 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>
17
John Conde

Je n'aime pas trop la solution javascript: elle est compliquée, difficile à maintenir et, bien sûr, échoue complètement lorsque JS est désactivé.

La solution moderne est d'utiliser Sprites CSS - essayez-le, croyez-moi, vous vous demanderez pourquoi vous ne l'avez jamais fait auparavant;)

10
dmp

J'ai trouvé ce lien sur la façon de précharger des images en utilisant du CSS pur:

http://www.thecssninja.com/css/even-better-image-preloading-with-css2

Et cela a fonctionné pour moi quand j'ai besoin de changer les différentes images de fond en vol stationnaire.

0
Sheena Katrina