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

Platzieren Sie eine zweite Kopie des Bildes an der gleichen Stelle und entfernen Sie dann das Originalbild.

function refreshImg(ele){
    ele.insertAdjacentHTML('beforebegin',ele.outerHTML);
    ele.parentNode.removeChild(ele);
}

Dadurch wird das Bild effektiv aktualisiert.

Crossbrowser zu. insertAdjacentHTML , outerHTML , parentNode y removeChild sind alle crossbrowser .

Der Leistungsverlust dürfte in den meisten Fällen vernachlässigbar sein. @Paolo Bergantino's Antwort ist wahrscheinlich besser als diese Funktion. Mit seiner Antwort ist nur ein DOM-Element betroffen. Zwei Elemente mit dieser Funktion.

Answer 2

Versuchen Sie, einen wertlosen Querystring zu verwenden, um eine eindeutige URL zu erhalten:

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

    setTimeout(updateImage, 1000);
}

Answer 3

Der folgende Code ist nützlich, um das Bild zu aktualisieren, wenn eine Schaltfläche angeklickt wird.

function reloadImage(imageId) {
   imgName = 'vishnu.jpg'; //for example
   imageObject = document.getElementById(imageId);
   imageObject.src = imgName;
}

<img src='vishnu.jpg' id='myimage' />

<input type='button' onclick="reloadImage('myimage')" />

Answer 4

Keine Notwendigkeit für new Date().getTime() Blödsinn. Sie können den Browser austricksen, indem Sie ein unsichtbares Dummy-Bild haben und jQuery .load() verwenden und dann jedes Mal ein neues Bild erstellen:

<img src="" id="dummy", style="display:none;" />  <!-- dummy img -->
<div id="pic"></div>

<script type="text/javascript">
  var url = whatever;
  // You can repeat the following as often as you like with the same url
  $("#dummy").load(url);
  var image = new Image();
  image.src = url;
  $("#pic").html("").append(image);
</script>

Answer 5

Einfache Lösung: Fügen Sie diese Kopfzeile in die Antwort ein:

Cache-control: no-store

Warum das so ist, wird auf dieser maßgeblichen Seite deutlich erklärt: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control

Sie erklärt auch, warum no-cache funktioniert nicht.

Andere Antworten sind nicht möglich, weil:

Caching.delete geht es um einen neuen Cache, den Sie für die Offline-Arbeit anlegen können, siehe: https://web.dev/cache-api-quick-guide/

Fragmente, die ein # in der URL enthalten, funktionieren nicht, da das # den Browser anweist, keine Anfrage an den Server zu senden.

Ein Cache-Buster mit einem zufälligen Teil, der der URL hinzugefügt wird, funktioniert, füllt aber auch den Browser-Cache. In meiner Anwendung wollte ich alle paar Sekunden ein 5 MB großes Bild von einer Webkamera herunterladen. Es dauert nur eine Stunde oder weniger, bis der PC komplett eingefroren ist. Ich weiß immer noch nicht, warum der Browser-Cache nicht auf ein vernünftiges Maximum begrenzt ist, aber das ist definitiv ein Nachteil.