Détecter la fin d'un préchargement d'images

**carjo** · 22/01/2014, 20h59

Bonjour,

J'utilise DTD XHTML 1.0 Transitional.

Dans un script js appelé à l'intérieur de balises <div>, est-il possible de savoir à quel moment précis le préchargement d'images est terminé à l'intérieur de cette balise ?

À quel moment la souris arrête de "tourner" et que les images sont prêtes chargées dans la cache ? Est-ce fait de façon asynchrone ? (ex: le texte de la balise s'affiche avant que le chargement soit terminé)

L'idée est d'interagir avec l'utilisateur pour l'affichage de messages. Mes recherches ont été infructueuses à ce sujet...

Merci pour votre aide

**Watilin** · 22/01/2014, 21h52

Si les images sont dans le code HTML original de la page (tel qu'il est livré par le serveur, autrement dit, non modifié par script), alors elles seront chargées en tant que ressources de la page, au même titre que les scripts et feuilles de style externes, par exemple.
Donc ça dépend des paramètres du navigateur (ex: si le pipelining est activé ou pas) et de l'OS (combien de connexions simultanées sont possibles). Avec Firefox, le profileur réseau (Ctrl+Maj+Q) te donne une assez bonne idée du moment où les choses sont chargées.

Envoyé par carjo

est-il possible de savoir à quel moment précis le préchargement d'images est terminé à l'intérieur de cette balise ?

Sur le MDN il est indiqué que l'évènement load ne bouillonne pas, donc tu ne pourras pas simplement attacher un gestionnaire d'évènement sur ta div.

Par contre, tu peux rajouter une balise <script> juste après ta <div> qui va parcourir toutes les images (grâce à querySelectorAll ou getElementsByTagName) et ajouter à chacune une gestionnaire de load :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
var images = maDiv.querySelectorAll("img");
var nImages = images.length;
var nImagesChargees = 0;
 
for (var i = 0; i < nImages; i++) {
   var img = images[i];
   if (img.complete) { // si l'image est déjà chargée
 
      nImagesChargees++;
      if (nImagesChargees === nImages) {
         interagir(); // fonction pour interagir avec l'utilisateur
      }
 
   } else {
      img.addEventListener("load", function( ){
 
         nImagesChargees++;
         if (nImagesChargees === nImages) {
            interagir(); // fonction pour interagir avec l'utilisateur
         }
 
      });
   }
}

Si tu connais la méthode d'itération forEach et la technique pour l'appeler sur des non tableaux (Array.prototype.forEach.call(...)), tu peux remplacer la boucle for.

Un dernier truc : d'habitude je ne conseille pas de mettre des balises <script> n'importe où au milieu du <body> : c'est pas bon pour la maintenance. Personnellement je préfère les mettre dans le <head> et déclencher mes fonctions sur l'évènement DOMContentLoaded. Il y a aussi une coutume assez répandue en HTML 5 qui est de mettre les scripts après le body. C'est à toi de voir

**carjo** · 23/01/2014, 03h31

Merci pour ta réponse rapide et instructive.

Concernant:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

if (img.complete)

j'obtiens toujours la réponse false, même si l'image est déjà chargée. Je n'ai pas trouvé d'explication, pourrais-tu me préciser pourquoi ?

Merci

**sekaijin** · 23/01/2014, 07h16

une solution concsste à faire ça en javascript directement
dans un js joint tu définit une méthode préloadImages
qui prends en paramètre un tableau d'url d'images et le div
pour chaque élément du tableau tu ajoute un element image fils du div
vu que c'est toi qui crée alors le div il est facile de le créer avec un handler sur l'événement load de l'image

le handler va faire comme ce que propose @Watilin et une fois toutes les image chargée lancer un custom event "images loaded" avec en paramètre le div et un tableau des éléments créés.

dans le onload de ta page tu appelle ta méthode avec la liste des images à charger.
tu peux définir un handler sur images loaded et réagir comme tu veux

c'est portable dans toutes tes pages

A+JYT

**carjo** · 23/01/2014, 20h58

Merci beaucoup.

Je suis très néophyte en javascript, désolée. J'ai fait un petit test dont voici le code ci-dessous. Le code charge bien les images en cache, il n'y reste que l'interaction avec l'utilisateur. Je suis bien consciente qu'il faut y ajouter un handler, mais peux-tu m'indiquer à quel endroit dans ce code .js serait-il le mieux placé ? Merci!

Fichier html:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div>
    <!--Bloc avec liens inactifs-->
    <p id="dis_lang">
        Fran&ccedil;ais
        <span style="padding-left:90px" >
        English</span>
        <br /><br />
    </p>
    <!--Bloc avec liens actifs-->
    <h2 id="t_lang"  style="display:none">
        <a href="./fr/accueil.html"  class="lang">Fran&ccedil;ais</a>
        <span style="padding-left:90px" >
            <a href="./en/home.html" class="lang">English</a>
        </span>
    </h2>
    <script type="text/javascript" language="JavaScript1.2" src="prechargerImg.js"></script>
</div>

Fichier js:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var images = new Array()
var i = 0;
function preload() 
{
	for (i; i < preload.arguments.length; i++){
		images[i] = new Image()
		images[i].src = preload.arguments[i]
        }
        if (i==preload.arguments.length){
            document.getElementById('dis_lang').style.display='none';
            document.getElementById('t_lang').style.display='block'; 
        }
}// end func
preload("images/001.jpg", "images/002.jpg", "images/003.jpg", "images/004.jpg", "images/005.jpg", "images/006.jpg", "images/007.jpg", "images/008.jpg", "images/009.jpg")

**carjo** · 24/01/2014, 15h33

Finalement, à l'aide de vos pistes, j'ai réussi à implémenter la fonction et à l'adapter à mon contexte et ça fonctionne très bien. J'ai aussi trouvé un article intéressant:

http://www.javascriptkit.com/javatut...agesplus.shtml

Merci beaucoup à tous et bonne journée.

**Watilin** · 24/01/2014, 18h12

Envoyé par carjo

Concernant:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

if (img.complete)

j'obtiens toujours la réponse false, même si l'image est déjà chargée. Je n'ai pas trouvé d'explication, pourrais-tu me préciser pourquoi ?

Eh bien en fait… Non, je ne peux pas

Dans ma mémoire défaillante (

) il me semblait qu'il y avait une propriété indiquant si l'image est chargée, un peu comme document.readyState pour la page, mais je ne me souvenais plus précisément alors j'ai fait une brève recherche. Un peu trop brève sans doute : l'info que j'ai trouvée date de 2002…

Apparemment c'est une extension MSIE. Mais ce n'est même pas indiqué sur le MDN donc il vaut mieux ne pas compter dessus.

Ça m'étonne quand même. Il n'y aurait pas de moyen trivial de détecter si une image est chargée ou pas…

**SylvainPV** · 24/01/2014, 20h19

Si si c'est bien sur MDN Watlin, tu regardais au mauvais endroit (les attributs du tag <img> et non les propriétés de l'objet HTMLImageElement) :
https://developer.mozilla.org/en-US/...MLImageElement

**Watilin** · 24/01/2014, 23h47

Ah merci Sylvain ^^

Mais du coup on ne sait pas pourquoi ça renvoyait tout le temps false chez Carjo

**SylvainPV** · 25/01/2014, 00h44

Sans un code de test complet, je ne m'avancerais pas à dire que le problème vient de img.complete

Détecter la fin d'un préchargement d'images

JavaScript

Discussions similaires

Partager

Partager