Update-ein Bild ohne Neuladen der Seite

Wie würde ich mich über ein abbild zu aktualisieren, die aktualisiert wird, die auf einem server alle paar Sekunden mit der Benutzer drücken Sie die Schaltfläche aktualisieren, meine erste Vermutung war ajax aber ich habe nicht wirklich mit ihm gearbeitet, bevor. Könnte mir jemand zeigen in die richtige Richtung?

EDIT: Vergaß zu erwähnen, dass das Bild eine .gif generiert ein perl-Skript versucht, es zu packen, indem Sie der url zurück ein Skript

Sie sagen, "der Versuch, es zu packen, indem Sie die url zurückgeben script", aber Sie deuten an, dass man derzeit laden Sie das Bild, indem Sie die Seite aktualisieren. Also, es muss eine url sein, holt das Bild. Bitte Bearbeiten Sie Ihre Frage zum zählen der html-Code für das img-tag, finden Sie, wenn Sie Ansicht Quelle?
es gibt keine Seite Seite Quelle, die die gesamte Seite ist einfach ein Bild, das generiert wird durch ein perl-Skript, daher gibt es keine img-tag, gibt es keine html. Ich wollte zu packen, wird das Bild im es in eine Webseite und aktualisieren Sie Sie aktualisieren das Bild, das generiert wird aus dem perl-Skript.

InformationsquelleAutor Mehran | 2011-06-28

  1. 3

    Es scheint, es ist etwas falsch mit Ihrem Perl-Skript. Versucht, Zugriff auf das Bild durch die URL sollte wieder ein Bild sowieso. Sollte es wieder binäre Daten und nicht ein Skript. Sie sollten auch die Content-type-header der Antwort auf image/gif. Überprüfen Sie, ob es in der Tat gibt binäre Daten, bevor Sie versuchen zu beheben JavaScript-code.

    Vielen Dank, es war das Skript.

    InformationsquelleAutor fromvega

  2. 10

    Kein AJAX ist notwendig, aktualisieren Sie einfach das Bild src Eigenschaft. Aber, da es die gleiche url, die Sie haben, um dem browser eine eindeutige Adresse, um sicherzustellen, dass Sie nicht laden Sie einfach das alte Bild aus dem browser-cache. Können Sie garantieren ein einzigartiges Bild, indem man das aktuelle Datum und die Seriennummer über new Date().valueOf() und anfügen, dass die url als querystring.

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

    Können Sie auch new Date().getTime() zu Holen Sie sich die Seriennummer, oder einfach nur zwingen das Datum in eine Zahl: +new Date()

    Tun Sie es auf einen timer verwenden setInterval(). Das wäre der komplette code, dass man nur drop innerhalb eines script-Tags in Ihrer Seite <head>:

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

    InformationsquelleAutor gilly3

  3. 9

    Etwas wie

    Dokument.getElementById('yourimage').src = "url/der/Bild.jpg?random="+new Date().getTime();

    Diese änderungen das src-Attribut des image-tag (mit id "yourimage") und fügt eine zufällige query-string, der den browser dazu zwingt reload das Bild jedes mal, wenn Sie es ändern.

    Neu laden das Bild alle 5 Sekunden, etwas zu tun:

    Fenster.setInterval(function() 
{ 
Dokument.getElementById('yourimage').src = "url/der/Bild.jpg?random="+new Date().getTime(); 
}, 5000);

    InformationsquelleAutor Steffen Müller

  4. 3

    nutzen Sie javascript, aktualisieren Sie die src-Eigenschaft des img.

    HTML: 

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

    JS: 

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

    Wenn Sie wollen, dass es auf einen timer, so etwas wie dies tun: 

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

    Wenn Sie haben ein Problem mit caching, fügen Sie eine zufällige query-string an das Ende der url: "?rnd=randomNumberHere"

    InformationsquelleAutor Steve

  5. 1

    Hinzufügen einer Zeitspanne am Ende der Bild-URL für mich gearbeitet.

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

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

    InformationsquelleAutor Dulanjana Wickramatantri

  6. 0

    alle X Sekunden senden von Ajax-server. wenn link des Bildes aus der Antwort == Vorherige, kein update, wenn link neue: $('img.class').attr('src','link');

    InformationsquelleAutor bravedick

Schreibe einen Kommentar