Partage
  • Partager sur Facebook
  • Partager sur Twitter

[ JavaScript ] préchargement d'images

    13 octobre 2006 à 22:42:36

    Bonjour, je crée actuellement un site et j'aimerai précharger certaines images au chargement de ma page pour qu'il n'y ai pas de temps de chargement lorsque le script les appelle (c'est dans un menu, lorsque le pointeur de la souris va sur un lien-image, pour changer l'image).

    Voici mon script (probablement faux) pour le préchargement d'images :
                           
    function prechargerImages ()
    {
            var MAX_IMAGES = 11; // nbr maximum d'images à précharger
                           
            // On précharge les images dans le cache du navigateur :
            var i;
                                                                   
            for (i = 0; i <= MAX_IMAGES; i++)
            {
                    var url_image;
                    switch (i)
                    {
                            case 0:
                            url_image = images/azerty.png;
                            break;
                                                   
                            case 1:
                            url_image = images/qsdfg.png;
                            break;
                                                   
                            case 2:
                            url_image = images/zertyu.png;
                            break;
                                                   
                            case 3:
                            url_image = images/ertyui.png;
                            break;
                                                   
                            case 4:
                            url_image = images/rtyuio.png;
                            break;
                                                   
                            case 5:
                            url_image = images/tyuiop.png;
                            break;
                                                   
                            case 6:
                            url_image = images/mloiuy.png;
                            break;
                                                   
                            case 7:
                            url_image = images/rtyuyt.png;
                            break;
                                                   
                            case 8:
                            url_image = images/esdgtr.png;
                            break;
                                                   
                            case 9:
                            url_image = images/dxghde.png;
                            break;
                                                   
                            case 10:
                            url_image = images/iuytre.png;
                            break;
                                                   
                            case 11:
                            url_image = images/xfgtjx.png;
                            break;
                    }
                                           
                    var image = new Image ();
                    image.src = url_image;
            }
                                           
    }


    Le problème c'est que j'aimerai afficher les images préchargées avec du css (baground-image), est-ce possible ? Mes premières images (quand la souris n'est pas sur le lien) sont affichées avec un background-image, et donc je voudrais éviter de creer des balise <img /> juste pour ça... (et je trouve que c'est plus propre d'afficher les images en CSS.)

    Vous allez me dire que j'ai pas besoin de javascript, je pourrais obtenir un résultat similaire en faisant uniquement du CSS, mais non parceque je veux me familiariser avec le javascript, donc je le privilégie...

    J'attends avec impatience vos correction sur mon scripts, et vos explications. :)
    • Partager sur Facebook
    • Partager sur Twitter
      14 octobre 2006 à 17:33:33

      <img src="image.jpg" width="0" height="0" style="display:none" alt="" />

      > c'est pas du background, mais sa précharge très bien les images ^^'

      pour du background, tu as juste à faire un bloc avec ton image dedant, et un display none :)
      • Partager sur Facebook
      • Partager sur Twitter

      [ JavaScript ] préchargement d'images

      × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
      × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
      • Editeur
      • Markdown