Bild mit einem neuen Bild unter der gleichen URL aktualisieren

Question

Ich greife auf einen Link auf meiner Website zu, der bei jedem Zugriff ein neues Bild liefert.

Das Problem, auf das ich stoße, ist, dass, wenn ich versuche, das Bild im Hintergrund zu laden und dann das Bild auf der Seite zu aktualisieren, sich das Bild nicht ändert, obwohl es aktualisiert wird, wenn ich die Seite neu lade.

var newImage = new Image();
newImage.src = "http://localhost/image.jpg";

function updateImage()
{
if(newImage.complete) {
    document.getElementById("theText").src = newImage.src;
    newImage = new Image();
    number++;
    newImage.src = "http://localhost/image/id/image.jpg?time=" + new Date();
}

    setTimeout(updateImage, 1000);
}

Kopfzeilen, wie FireFox sie sieht:

HTTP/1.x 200 OK
Cache-Control: no-cache, must-revalidate
Pragma: no-cache
Transfer-Encoding: chunked
Content-Type: image/jpeg
Expires: Fri, 30 Oct 1998 14:19:41 GMT
Server: Microsoft-HTTPAPI/1.0
Date: Thu, 02 Jul 2009 23:06:04 GMT

Ich muss eine Aktualisierung genau dieses Bildes auf der Seite erzwingen. Irgendwelche Ideen?

Answer 1

<img src='someurl.com/someimage.ext' onload='imageRefresh(this, 1000);'>

Dann unten in etwas javascript

<script language='javascript'>
 function imageRefresh(img, timeout) {
    setTimeout(function() {
     var d = new Date;
     var http = img.src;
     if (http.indexOf("&d=") != -1) { http = http.split("&d=")[0]; } 

     img.src = http + '&d=' + d.getTime();
    }, timeout);
  }
</script>

Wenn das Bild geladen wird, wird es also in 1 Sekunde neu geladen. Ich verwende dies auf einer Seite mit Haussicherheitskameras unterschiedlicher Art.

Answer 2

Ich hatte eine Anforderung: 1) nicht hinzufügen können alle ?var=xx zum Bild 2) es sollte domänenübergreifend funktionieren

Ich mag die Option #4 in diese Antwort mit einer Ausnahme:

• es hat Probleme, zuverlässig mit Crossdomain zu arbeiten (und es erfordert einen Eingriff in den Servercode).

Mein schneller und schmutziger Weg ist:

1. Versteckten Iframe erstellen
2. Laden Sie die aktuelle Seite dazu (ja, die ganze Seite)
3. iframe.contentWindow.location.reload(true);
4. Setzen Sie die Bildquelle auf sich selbst zurück

Hier ist sie

function RefreshCachedImage() {
    if (window.self !== window.top) return; //prevent recursion
    var $img = $("#MYIMAGE");
    var src = $img.attr("src");
    var iframe = document.createElement("iframe");
    iframe.style.display = "none";
    window.parent.document.body.appendChild(iframe);
    iframe.src = window.location.href;
    setTimeout(function () {
        iframe.contentWindow.location.reload(true);
        setTimeout(function () {
            $img.removeAttr("src").attr("src", src);
        }, 2000);
    }, 2000);
}

Ja, ich weiß, setTimeout... Sie müssen das in richtige onload-Ereignisse ändern.

Answer 3

Ich habe es so gemacht, dass der Server jede Anfrage nach einem Bild in diesem Verzeichnis der Quelle zuordnete, die ich zu aktualisieren versuchte. Ich hatte dann meine Timer eine Zahl an das Ende des Namens anhängen, so dass die DOM würde es als ein neues Bild zu sehen und laden Sie es.

z.B.

http://localhost/image.jpg
//and
http://localhost/image01.jpg

wird derselbe Code für die Bilderzeugung angefordert, aber für den Browser sehen die Bilder anders aus.

var newImage = new Image();
newImage.src = "http://localhost/image.jpg";
var count = 0;
function updateImage()
{
    if(newImage.complete) {
        document.getElementById("theText").src = newImage.src;
        newImage = new Image();
        newImage.src = "http://localhost/image/id/image" + count++ + ".jpg";
    }
    setTimeout(updateImage, 1000);
}

Answer 4

Diese Antwort basiert auf mehreren der obigen Antworten, vereinheitlicht und vereinfacht sie jedoch ein wenig und stellt die Antwort als JavaScript-Funktion dar.

function refreshCachedImage(img_id) {
    var img = document.getElementById(img_id);
    img.src = img.src; // trick browser into reload
};

Ich brauchte eine Lösung für das Problem, dass animierte SVGs nach dem ersten Durchlauf nicht neu gestartet werden.

Dieser Trick funktioniert auch bei anderen Medien wie Audio und Video.

Answer 5

Eine Antwort ist, hackishly einige get Abfrageparameter hinzufügen, wie vorgeschlagen wurde.

Eine bessere Lösung ist es, ein paar zusätzliche Optionen in Ihrem HTTP-Header auszugeben.

Pragma: no-cache
Expires: Fri, 30 Oct 1998 14:19:41 GMT
Cache-Control: no-cache, must-revalidate

Wenn Sie ein Datum in der Vergangenheit angeben, wird es vom Browser nicht zwischengespeichert. Cache-Control wurde in HTTP/1.1 hinzugefügt, und das must-revalidate-Tag zeigt an, dass Proxys selbst unter mildernden Umständen niemals ein altes Bild ausliefern sollten, und das Pragma: no-cache ist für aktuelle moderne Browser/Caches nicht wirklich notwendig, kann aber bei einigen mangelhaften alten Implementierungen helfen.