Discussion :

[Popaul22]

Bonjour à tous et toutes !

Pour un jeu que je suis en train de développer, j'ai besoin d'afficher une image sur une page web, je la transmets par ftp sur son site.
Ca marche bien, mais je voudrais automatiser le reload de la page quand l'image change :
pour mon premier essai, j'avais juste mis un reload manuel :

Code html :

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

<small style="color: rgb(0, 0, 153);"><small><a href="javascript:window.location.reload()">NOUVELLE IMAGE</a><br>

ensuite j'ai mis un reload toutes les 5 secondes :

Code html :

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

<script> {   setInterval(function(){ window.location.reload(); }, 5000); } </script>

mais ça fait clignoter l’écran toutes 5 secondes, ce n'est pas agréable !

Est-il possible de faire en sorte que le reload ne soit fait que quand l'image a changé ?
Je l'affiche avec :

Code html :

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

<img style="width: 800px; height: 649px;" src="Question.jpg" alt="DIAPO" hspace="30" vspace="30">

L'image a toujours le même nom, Question.jpg.
Sur quel critère reconnaître la nouvelle image ? Le nombre d'octets, l'heure de dépôt ?

J'ai pensé mettre en variables, après le chargement de la première image, ces paramètres et faire une boucle qui teste si l'image a changé pour déclencher le reload.

Quelqu'un peut-il m'aider ?
merci d'avance !

[Golgotha]

Salut "Popaul22",

Une idée parmi d'autre :

- Tu récupères l'image via une requête ajax
- Tu calcul un hash de l'image que tu stocks dans son id
- Tout les X temps tu va récupérer l'image et son hash
- Si le hash est différent tu insères la nouvelle image à la place de l’ancienne

[Popaul22]

Merci Golgotha mais je ne connais pas du tout ajax ! Je vais me renseigner ...

[Watilin]

Ajax c’est en gros toute technique qui utilise l’objet XMLHttpRequest. jQuery utilise cet objet sous le capot. Alternativement il y a la méthode fetch plus récente, qui n’est pas supportée par IE11 et dont la syntaxe est un peu différente. Je vais te présenter les deux approches et te laisser décider laquelle tu préfères.

Avec XMLHttpRequest, on utilise une fonction de rappel (ici onload). L’idée c’est qu’on déclare une fonction mais on ne sait pas exactement quand elle sera appelée. C’est le navigateur qui l’appelle pour toi, quand la requête a abouti. On dit que la fonction est appelée de manière asynchrone.

Code :

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

1
2
3
4
5
6
7
8
9
10
const req = new XMLHttpRequest();
req.open("GET", adresseDeLImage);
req.onload = function () {
  const headers = req.getAllResponseHeaders();
  console.log(headers);
 
  // ...
 
};
req.send();

Avec la console (F12) ouverte, tu devrais voir apparaître les en-têtes HTTP de ton image, notamment Content-Length et Last-Modified qui t’aideront à déterminer si l’image a changé ou pas. Selon le serveur, il peut y avoir aussi un en-tête Etag qui est une sorte de hash.
Pour récupérer séparement l’en-tête qui t’intéresse, utilise la méthode getResponseHeader, par exemple :

Code :

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

const contentLength = req.getResponseHeader("Content-Length");

Tout cela suppose que tu as préalablement stocké une taille / date précédentes de l’image dans des variables, mais je te laisse gérer ce problème. Une fois que tu as compris les subtilités d’ajax, le reste n’est pas très compliqué.
Je veux surtout attirer ton attention ici sur le fait que la fonction onload est asynchrone : elle est déclarée avant l’appel à .send(), mais elle sera appelée après. C’est un peu difficile à comprendre au début.

La doc : https://developer.mozilla.org/fr/doc...XMLHttpRequest

Avec fetch, le côté asynchrone est là aussi, hé oui on ne peut pas y échapper. Par contre, la syntaxe utilisée est celle des promesses, ce qui peut rendre le codage plus intuitif, ça dépend des gens. Le principe est que fetch renvoie une promesse (objet de classe Promise) qui a une méthode .then(). On passe une fonction à cette méthode, cette fonction sera appelée de manière asynchrone, comme la onload de l’exemple précédent.

Code :

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

1
2
3
4
fetch(adresseDeLImage).then(function (response) {
  console.log(response.headers.get("Content-Length"));
 
});

Remarque que la syntaxe pour récupérer les en-têtes est différente aussi, parce que… Le monde est moche. Je te conseille de choisir une des deux techniques (XMLHttpRequest ou fetch) et de t’y tenir pour éviter de faire des confusions.

La doc pour fetch : https://developer.mozilla.org/fr/docs/Web/API/Fetch_API


Pour la fin je te propose une petite optimisation, car ton script va être amené à faire beaucoup de requêtes à ton serveur pour la même image, et tu es surtout intéressé par les métadonnées de l’image (donc les en-têtes HTTP), pas l’image elle-même. Pour alléger les requêtes, tu peux utiliser la méthode "HEAD" à la place de la méthode par défaut qui est "GET".

Code :

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

1
2
// version XMLHttpRequest
req.open("HEAD", adresseDeLImage);

ou

Code :

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

1
2
// version fetch
fetch(adresseDeLImage, { method: "HEAD" }).then( ... );

[Popaul22]

Merci beaucoup Watilin pour ta précieuse réponse , riche d'enseignements !
Pour moi ca sera uniquement la première méthode, avec XMLHttpRequest car certains utilisent encore IE11 ...
Je vais plancher la dessus. Mon serveur utilise windows serveur 2008 R2.

Merci !
Paul.

[Popaul22]

Bonjour Watilin,

bon j'ai bossé la-dessus : j'arrive bien à afficher chaque nouvelle image sans intervention de l'utilisateur, mais avec quand même un reload toutes les 3 secondes, malgré le test que je fais.
Voici mon code :

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
25
26
 
<script>
let AncienneTailleImage = 0;
let TailleImage =0;
 
function LitImage()
{
let req = new XMLHttpRequest();
req.open("GET", "Question.jpg");
req.onload = function () {
 
TailleImage = req.getResponseHeader("Content-Length");
 
}
req.send();
 
 
if (TailleImage != AncienneTailleImage)  { 
AncienneTailleImage = TailleImage;
window.location.reload(); }
 
}
 
setInterval("LitImage()", 3000);
 
</script>

J'ai vérifié avec des console.log la nouvelle taille de l'image est bien prise en compte, les deux valeurs sont égales après le premier reload mais la condition semble ignorée ensuite.
Tu as une idée de ce que j'ai mal fait ?

Merci beaucoup !
Paul

[Golgotha]

Bonjour Popaul22,

Il ne faut pas rafraîchir toute la page, mais plutôt recharger l'image.

Tu peux t'inspirer de ça par exemple : https://instructobit.com/tutorial/11...ing-Javascript

[Watilin]

Je me demandais aussi si le rechargement est vraiment nécessaire, mais il y a peut-être d’autres éléments qui en dépendent, j’ai préféré ne pas faire de suppositions.

Popaul22, je t’invite à regarder attentivement dans quel ordre s’exécutent les instructions de ta fonction LitImage. Il s’y passe essentiellement 3 choses :

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
function LitImage() {
  let req = new XMLHttpRequest();                          //
  req.open("GET", "Question.jpg");                         //
  req.onload = function () {                               // 1
    TailleImage = req.getResponseHeader("Content-Length"); //
  }                                                        //
 
  req.send(); // 2
 
 
  if (TailleImage != AncienneTailleImage) { //
    AncienneTailleImage = TailleImage;      // 3
    window.location.reload();               //
  }                                         //
}

1. Création de la requête et attachement de la fonction de rappel
2. Envoi de la requête
3. Comparaison des valeurs de taille de l’image, avec potentiel rechargement de la page

Notamment, l’exécution passe directement de 2 à 3 (normal) et ne laisse pas le temps à la fonction onload, qui est asynchrone, d’être appelée. Du coup, la comparaison des tailles se fait avant que la nouvelle taille soit reçue.
Pour régler ce problème, il faut placer le code de comparaison dans la fonction de rappel :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function LitImage() {
  let req = new XMLHttpRequest();
  req.open("GET", "Question.jpg");
 
  req.onload = function () {
    TailleImage = req.getResponseHeader("Content-Length");
    if (TailleImage != AncienneTailleImage) {
      AncienneTailleImage = TailleImage;
      window.location.reload();
    }
  }
 
  req.send();
}

[Popaul22]

Merci beaucoup Watilin !

en effet, mais cela ne fonctionne quand même pas, les images ne changent pas
Mais j'ai trouvé la solution, voici mon code, plus simple :

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
18
19
20
21
22
23
24
<html> 
<script> 
var questionimage; 
var imgBase="Question.jpg";
var c = 0; 
function count() 
{ 
 questionimage.src=imgBase+ "?" + (++c); 
} 
function init() 
{ 
 questionimage = document.getElementById("questionimage"); 
 if( questionimage ) 
 { 
  setInterval("count()",1000); 
 } 
} 
window.onload = init; 
</script> 
<body> 
<p align="center">Jeu Multimédia</p> 
<p align="center"><img src="http://xxxxxxxxx.xxx/jeu/Question.jpg" name="image" id="questionimage"></p> 
</body> 
</html>

et là ça marche nickel !

Merci de m'avoir consacré un peu de temps.