Mise à jour d'une image sans rechargement de page

Comment pourrais-je mettre à jour une image qui se met à jour sur un serveur toutes les deux secondes sans que l'utilisateur ait à frapper le bouton de rafraîchissement, ma première supposition était ajax mais je n'ai vraiment pas travaillé avec elle. Quelqu'un peut-il m'indiquer la bonne direction?

EDIT: J'ai oublié de mentionner que l'image est un .gif généré par un script perl – essayant de l'attraper par url return a script

Il semble qu'il y ait quelque chose de mal avec votre script Perl. Essayer d'accéder à l'image par l'URL doit renvoyer une image de toute façon. Il devrait renvoyer des données binaires et non pas un script. Vous devez également définir l'en-tête de type Content de la réponse à image / gif. Vérifiez s'il retourne des données binaires avant d'essayer de réparer votre code JavaScript.

Aucun AJAX n'est nécessaire, il suffit de mettre à jour la propriété src l'image. Mais, puisqu'il a la même URL, vous devez donner au navigateur une adresse unique pour vous assurer de ne pas simplement charger l'ancienne image à partir du cache du navigateur. Vous pouvez garantir une image unique en obtenant le numéro de série de la date actuelle via la new Date().valueOf() et l'ajouter à l'url en tant que chaîne de requête.

 $("#dynamicImage").prop("src", "dynamicImage.jpg?" + new Date().valueOf());

Vous pouvez également utiliser new Date().getTime() pour obtenir le numéro de série, ou simplement contraindre la date à un nombre: +new Date()

Pour le faire sur une temporisation, utilisez setInterval() . Ce serait le code complet que vous pourriez déposer dans une balise de script dans <head> votre page:

 $(function() { var intervalMS = 5000; // 5 seconds setInterval(function() { $("#dynamicImage").prop("src", "dynamicImage.jpg?" + +new Date()); }, intervalMS); });

Faire quelque chose comme

 Document.getElementById ('yourimage'). Src = "url / of / image.jpg? Random =" + new Date (). GetTime ();

Cela modifie l'attribut src de votre balise d'image (avec id "yourimage") et ajoute une chaîne de requête aléatoire, ce qui oblige le navigateur à recharger l'image chaque fois que vous l'modifiez.

Pour recharger l'image toutes les 5 secondes, procédez comme suit:

 Window.setInterval (function ()
 {
     Document.getElementById ('yourimage'). Src = "url / of / image.jpg? Random =" + new Date (). GetTime ();
 }, 5000);

Utilisez simplement javascript pour mettre à jour la propriété src de l'img.

HTML:

 <img src="..." id="myImage" />

JS:

 document.getElementById("myImage").src = "http://....";

Si vous le souhaitez sur une minuterie, faites quelque chose comme ceci:

 setInterval(function() { ... }, 4000);

Si vous avez un problème avec la mise en cache, ajoutez une chaîne de requête aléatoire à la fin de l'url: "? Rnd = randomNumberHere"

L'ajout d'un intervalle de temps jusqu'à la fin de l'URL de l'image a fonctionné pour moi.

Var imagePath = " http: //localhost/dynamicimage.ashx ";

$ ("# ImgImage"). Attr ("img", imagePath + & ts "+ (nouvelle Date ()), toString ());

Chaque X secondes envoie Ajax au serveur. Si lien d'image de réponse == précédent, pas de mise à jour, si lien nouveau: $('img.class').attr('src','link');