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

14

J'ai un lien qui commence par une image d'arrière-plan, puis passe au survol d'une autre. Les deux images d'arrière-plan sont définies dans le CSS. Mes navigateurs (aucun d'entre eux) ne semblent charger l'image de survol jusqu'à ce que vous survoliez réellement. Mais vous vous retrouvez avec une image vierge pendant les quelques secondes (sur ma connexion très lente) qu'il faut pour charger la nouvelle. Existe-t-il un moyen d'encourager le navigateur à précharger l'image en survol afin que le temps de retard ne se produise pas en survol?

css images load-time Daniel Bingham
la source

Réponses:

17

1) Utilisez CSS Sprites (c'est la méthode préférée).

2) Chargez les images dans une div cachée. Placez les images dans le div, puis définissez le CSS du div 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) Utilisez 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>
John Conde
la source
Existe-t-il un moyen de les charger après le chargement de la page? L'utilisateur ne voit donc pas de cercle de chargement sur le curseur? Une façon serait d'avoir un cadre caché qui utilise javascript pour retarder l'affichage du cadre caché, comme dans ma question stackoverflow.com/questions/13437091/… mais existe-t-il une méthode préférée pour retarder et ne pas afficher le cercle de chargement sur ce curseur ?
montée contre le
Peu importe, j'ai trouvé ce perishablepress.com/3-ways-preload-images-css-javascript-ajax et cela fonctionne parfaitement avec le retard.
contre le
10

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

La solution moderne consiste à utiliser CSS Sprites - essayez-le, croyez-moi, vous vous demanderez pourquoi vous n'avez jamais fait cela auparavant;)

dmp
la source
0

Ajoutez ceci au-dessus de votre CSS:

<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" />

Si vous suivez la route des sprites comme danp suggère que vous avez toujours un problème avec le chargement du sprite avant qu'il ne soit nécessaire. Cela dit, j'aime les sprites; pour les faire facilement j'utilise l' outil spriteme de Steve Souders:

Nisse Engström
la source