Bonjour,

Sur une page de mon site j'ai 3 images (photos) et 2 vidéos .flv.
Depuis que j'ai rajouté les vidéos, le navigateur ne m'affiche plus les photos. Je pense que la vidéo commence à se charger et que le navigateur attend que cela soit terminé pour charger ensuite les images...
Ma question est : comment pré-charger mes 3 images JPG ?
Dreamweaver propose des javascripts qui le font, mais cela semble lié à des évènements (onclick, etc), or moi je voudrais que ces images soient chargées prioritairement, dès le début.

Merci de l'aide que vous pourrez m'apporter.

Il te suffit de créer un objet Image tout bête et de lui assigner une source, exemple :

var img = new Image();
img.src = 'img.jpg'; // On indique l'image à précharger

// Tu peux même détecter la fin du préchargement grâce à l'évènement onload :
img.onload = function(){
  alert('Préchargement terminé !');
};

Mais une question, tu es sûr que c'est bien ça ton problème ? Si tu retires les vidéos ça fonctionne de nouveau ?

Oui, le problème vient bien de là : si je supprime les vidéos sur mon serveur c'est OK.
Si elles sont présentes le navigateur me dit :"3 éléments restants à télécharger..." mais ça ne vient jamais.

Je pense que ton script est ce qu'il me faut, je te remercie !

Par contre je suis un peu nul en javascript (c'est le site du zéro, je suis débutant j'ai le droit )... peux-tu me dire où je dois insérer ce code stp ? A l'endroit où se trouve l'image ? Dans une fonction javascript appelée par un "onload" dans la balise body ?

Tu insères cela dans le header de ta page, comme ceci :

<script type="text/javascript">
<!--
  window.onload = function(){
    // Le code de préchargement.
  };
//-->
</script>

Par contre si tu as l'intention d'ajouter des images par la suite ça va être pénible de rajouter constamment des lignes de code JS pour que les images soit chargées, donc y'a ceci qui permet de précharger toutes les images présentes sur la page :

<script type="text/javascript">
<!--
  window.onload = function(){
    var imgTarget = document.getElementsByTagName('img');
    var imgsNbr = imgTarget.length;
    var imgsArray = new Array();
    
    for(var i=0 ; i < imgsNbr ; i++) {
      imgsArray[i] = new Image();
      imgsArray[i].src = imgTarget[i].src;
    }
  };
//-->
</script>

Merci. Cela a parfaitement répondu à ma question, et mon problème semble résolu.



-------
http://www.labista.net

Dans ce cas, indique-le par le biais du lien en bas de la page .

Citation : Nesquik69

Tu insères cela dans le header de ta page, comme ceci :

<script type="text/javascript">
<!--
  window.onload = function(){
    // Le code de préchargement.
  };
//-->
</script>

Par contre si tu as l'intention d'ajouter des images par la suite ça va être pénible de rajouter constamment des lignes de code JS pour que les images soit chargées, donc y'a ceci qui permet de précharger toutes les images présentes sur la page :

<script type="text/javascript">
<!--
  window.onload = function(){
    var imgTarget = document.getElementsByTagName('img');
    var imgsNbr = imgTarget.length;
    var imgsArray = new Array();
    
    for(var i=0 ; i < imgsNbr ; i++) {
      imgsArray[i] = new Image();
      imgsArray[i].src = imgTarget[i].src;
    }
  };
//-->
</script>

Beh non, tu peux pas le faire ça, l'événement sera déclencher lorsque tout aura fini de charger, plus besoin de charger les images de ta page !
Soit tu le fait a la fin, et encore, je suis pas sur que ca marche, soit tu les déclares à la main, et tu peux le faire n'importe ou, avant les images bien sur

J'ai un doute, normalement le onload se déclenche une fois que toute la page est lue et affichée et non pas quand les fichiers annexes sont téléchargés (images, vidéos...), j'ai tort ?

Oui parce que je me souviens d'un script sous IE ou j'avais mis un setTimeout au lieu d'un onload, sauf que les images mettait tellement de temps à charger sous IE que je pouvais pas les récupérer en js, alors qu'avec onload, tout marchais bien .
Enfin, j'en suis pas sura 100% .

Je viens de tester Nesquik... il semblerait en effet que tu aies tort.

J'ai testé avec un simple alert... le onload attend le chargement des images (les vidéos je sais pas).

Ah ouais fail... ben dans ce cas suffit de virer le window.onload et de mettre le tout en bas de la page non ?

Tu peux le faire égalament en HTML :

<img src="mon_image.jpg" display="none" alt="" />

haha! j'avais envie de le dire!
surtout vu le code de Nesquik69

Bon, gros fail sur toute la longueur... Je vous laisse, je vais chercher une corde x)