Mise à jour d'une image sans rechargement de page

Comment procéder pour mettre à jour une image mise à jour sur un serveur toutes les quelques secondes sans que l'utilisateur doive appuyer sur le bouton d'actualisation, ma première estimation était ajax mais je n'ai pas vraiment travaillé avec ça avant. Quelqu'un peut-il m'indiquer la bonne direction?Mise à jour d'une image sans rechargement de page

EDIT: Vous avez oublié de mentionner que l'image est un .gif généré par un script Perl - essayant de l'attraper par url retourner un script

Source

2011-06-28 Mehran

Vous dites" en essayant de le récupérer par url retourner un script ", mais vous laissez entendre que vous pouvez recharger le image en rafraîchissant la page Donc, il doit y avoir une URL qui récupère l'image Voulez-vous s'il vous plaît modifier votre question pour inclure le html pour le tag img que vous trouvez lorsque vous voyez la source? – gilly3

@ gilly3 il n'y a pas de page la page entière est simplement une image qui est générée par un script perl, donc il n'y a pas de balise img, il n'y a pas de HTML, je voulais saisir cette image en la mettant dans une page web et la rafraîchir pour mettre à jour l'image générée script perl – Mehran

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

Source

2011-06-28 16:55:56 fromvega

Merci beaucoup c'était le script. – Mehran

il suffit d'utiliser le 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, faire quelque chose comme ceci:

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

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

Source

2011-06-28 16:44:02 Steve

faire quelque chose comme

 
document.getElementById('yourimage').src = "url/of/image.jpg?random="+new Date().getTime();

Cela change l'attribut src de la balise d'image (avec id « yourimage ») et ajoute une chaîne de requête aléatoire à elle, forçant le navigateur à recharger l'image chaque fois que vous le changiez.

Pour recharger l'image toutes les 5 secondes, faire quelque chose comme:

 
window.setInterval(function() 
{ 
    document.getElementById('yourimage').src = "url/of/image.jpg?random="+new Date().getTime(); 
}, 5000);

Source

2011-06-28 16:44:58

toutes les X secondes envoyer Ajax au serveur. if link of image from response == précédent, pas de mise à jour, si lien nouveau: $('img.class').attr('src','link');

Source

2011-06-28 16:47:18 bravedick

Aucun AJAX n'est nécessaire, il suffit de mettre à jour la propriété src de l'image. Mais, comme il a la même URL, vous devez donner au navigateur une adresse unique pour vous assurer de ne pas charger l'ancienne image depuis le cache du navigateur. Vous pouvez garantir une image unique en obtenant le numéro de série de la date en cours via new Date().valueOf() et en l'ajoutant à 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 tout simplement forcer la date à un certain nombre: +new Date()

Pour ce faire sur une utilisation de la minuterie setInterval(). Ce serait le code complet que vous pouvez simplement laisser tomber dans une balise de script dans la page de votre <head>:

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

Source

2011-06-28 16:57:16 gilly3

Ajout d'un laps de temps à la fin de l'URL d'image a fonctionné pour moi.

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

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

Source

2016-11-30 06:21:40

Mise à jour d'une image sans rechargement de page

Répondre

Questions connexes