window.location.reload conditionnel ?

Pour toutes les discussions javascript, jQuery et autres frameworks
Répondre
EricLeBreton
Messages : 4
Enregistré le : 17 nov. 2020, 18:59

window.location.reload conditionnel ?

Message par EricLeBreton » 18 nov. 2020, 00:14

Bonjour à tous,

je ne m'y connais que très peu en java et j'ai le souci suivant :
pour améliorer un jeu genre quiz que j'ai réalisé en VB6 et fais tourner sur un système de visiotchat non html j'ai besoin d'afficher des images sur une page html mise sur un serveur. J'uploade les images sur ce serveur et les gens les voient sur un onglet de leur navigateur sur l'url du serveur.
Pour qu'ils voient chaque nouvelle image ils devaient faire un rafraîchissement manuel, :
<small style="color: rgb(0, 0, 153);"><small><a href="javascript:window.location.reload()">NOUVELLE
DIAPO</a><br>

puis j'ai ajouté un rafraichissement régulier chaque 5 secondes comme ceci :
<script>
{
setInterval(function(){ window.location.reload(); }, 5000);
}
</script>
Le problème est que la page est reloadée même quand l'image n'est pas changée, ca clignote c'est pas bien !
Comment faire pour que le script vérifie si l'image a été changée, en vérifiant sa taille par exemple, et ne fasse le reload qu'à ce moment là ?
Le nom de l'image est toujours le même : Question.jpg

Voilà mon script actuel :
</head>

<body style="background-color: rgb(204, 255, 255); color: rgb(0, 0, 0);" alink="#ee0000" link="#0000ee" vlink="#551a8b">

<big style="color: rgb(255, 0, 0);"><big><big><small>&nbsp;
&nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;Q U I Z Z &nbsp; &nbsp; M U L T I M E D I A

</small><br>

<br style="color: rgb(0, 0, 153);">


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

<br>

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

Merci de votre aide !!
Eric

Avatar du membre
webmaster
Administrateur du site
Messages : 301
Enregistré le : 28 févr. 2017, 15:19

Re: window.location.reload conditionnel ?

Message par webmaster » 19 nov. 2020, 10:40

Bonjour,

Il faut utiliser des appels asynchrones avec AJAX
Le principe est qu'un appel JS envoie une demande vers le serveur et déclenche une action quand le serveur répond.
La page n'est pas modifiée et c'est totalement transparent pour l'utilisateur

Voici un tutorial
https://www.toutjavascript.com/savoir/x ... quest.php3
TJS : 20 ans et mon livre Tout JavaScript chez Dunod
https://www.toutjavascript.com/livre/index.php

EricLeBreton
Messages : 4
Enregistré le : 17 nov. 2020, 18:59

Re: window.location.reload conditionnel ?

Message par EricLeBreton » 19 nov. 2020, 23:59

Bonsoir Webmaster, et merci pour ta réponse
En cherchant un peu partout j'ai trouvé des exemples de scripts en ajax pour ça, voici celui que j'ai fait, mais ca ne marche pas !

Code : Tout sélectionner

<html>

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

<img style="width: 800px; height: 649px;" src="Question.jpg"

</body>
</html>

Il fait tout le temps le reload, même quand les tailles d'images sont identiques.
Le principe que j'ai voulu faire est de regarder toutes les 3 secondes si l'image a changé (taille différente) et seulement alors faire le reload.

Que penses-tu de mon code ?
Merci !
Eric

Avatar du membre
webmaster
Administrateur du site
Messages : 301
Enregistré le : 28 févr. 2017, 15:19

Re: window.location.reload conditionnel ?

Message par webmaster » 20 nov. 2020, 10:57

Bonjour,

L'idée est bien là mais il y a quelques erreurs.

D'abord la syntaxe setInterval n'est pas bonne. il faut appeler le nom de la fonction :
s

Code : Tout sélectionner

etInterval(LitImage, 3000);
Ensuite, il ne faut pas reloader la page a chaque fois, il faut utiliser la manipulation du document avec

Code : Tout sélectionner

document.getElementById("idImage").src=
J'ai ajouté un random pour éviter les effets de cache


Voici un code complet testé qui reste à améliorer

Code : Tout sélectionner

<img src="" id="idImage">

<script>
let AncienneTailleImage = 0;
let TailleImage =0;
let image="/gif/logo01.gif";

function LitImage() {
  let req = new XMLHttpRequest();

  req.open("POST", image);
  req.onload = function () {
    TailleImage = req.getResponseHeader("Content-Length");
    console.log("TailleImage="+TailleImage);
    console.log("AncienneTailleImage="+AncienneTailleImage);

    if (TailleImage != AncienneTailleImage) { 
      AncienneTailleImage = TailleImage;
      document.getElementById("idImage").src=image+"?"+Math.random();
    }
  }
  req.send();
}

setInterval(LitImage, 3000);

</script>
TJS : 20 ans et mon livre Tout JavaScript chez Dunod
https://www.toutjavascript.com/livre/index.php

EricLeBreton
Messages : 4
Enregistré le : 17 nov. 2020, 18:59

Re: window.location.reload conditionnel ?

Message par EricLeBreton » 20 nov. 2020, 13:59

Merci, Webmaster je vais essayer cela.
Cependant j'ai résolu le problème autrement, et ça me donne satisfaction :

Code : Tout sélectionner

<html> 
<script> 
var webcamimage; 
var imgBase="Question.jpg";
var c = 0; 
function count() 
{ 
 webcamimage.src=imgBase+ "?" + (++c); 
} 
function init() 
{ 
 webcamimage = document.getElementById("webcamimage"); 
 if( webcamimage ) 
 { 
  setInterval("count()",2000); 
 } 
} 
window.onload = init; 
</script> 
<body> 
<p align="center">Jeu Multimédia</p> 
<p align="center"><img src="http://xxxxxxxxx.net/jeu/Question.jpg" name="image" id="webcamimage"></p> 
</body> 
</html>  
Je pourrais le modifier pour mettre ton random à la place du compteur, mais le principe est là.
Merci beaucoup, tu peux fermer ce post.
Eric

Avatar du membre
webmaster
Administrateur du site
Messages : 301
Enregistré le : 28 févr. 2017, 15:19

Re: window.location.reload conditionnel ?

Message par webmaster » 21 nov. 2020, 16:33

Bonjour,

Un compteur fonctionne aussi.
Mais il risque de reprendre des images anciennes du cache lors du chargement de la page le lendemain par exemple.

Classiquement, on choisit un random ou la date+heure pour s'assurer d'avoir un paramètre vraiment unique, même lors d'une nouvelle visite.
TJS : 20 ans et mon livre Tout JavaScript chez Dunod
https://www.toutjavascript.com/livre/index.php

EricLeBreton
Messages : 4
Enregistré le : 17 nov. 2020, 18:59

Re: window.location.reload conditionnel ?

Message par EricLeBreton » 21 nov. 2020, 16:57

Bonjour Webmaster,

oui je vais faire comme ça ...
Merci !

Répondre