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

function reloadImage(imageId)
{
   path = '../showImage.php?cache='; //for example
   imageObject = document.getElementById(imageId);
   imageObject.src = path + (new Date()).getTime();
}

<img src='../showImage.php' id='myimage' />

<br/>

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

Answer 2

document.getElementById("img-id").src = document.getElementById("img-id").src

sein eigenes src als sein src festlegen.

Answer 3

Ich hatte dasselbe Problem bei der Verwendung der Zufallsbildfunktion von Unsplash. Die Idee, einen Dummy-Query-String an das Ende der URL anzufügen, ist richtig, aber in diesem Fall funktioniert ein völlig zufälliger Parameter nicht (ich habe es ausprobiert). Ich kann mir vorstellen, dass dies auch bei anderen Diensten der Fall ist, aber bei Unsplash muss der Parameter lauten sig so dass Ihre Bild-URL zum Beispiel wie folgt lautet, http://example.net/image.jpg?sig=RANDOM wobei random eine zufällige Zeichenkette ist, die bei der Aktualisierung NICHT mehr dieselbe ist. Ich habe Math.random()*100 aber auch das Datum ist geeignet.

Sie müssen dies tun, da der Browser sonst erkennt, dass das Bild unter dem genannten Pfad bereits geladen wurde, und dieses zwischengespeicherte Bild verwendet, um das Laden zu beschleunigen.

Véase https://github.com/unsplash/unsplash-source-js/issues/9

Answer 4

Ich habe das Skript von AlexMA für die Anzeige meiner Webcam auf einer Webseite, die regelmäßig ein neues Bild mit demselben Namen hochlädt. Ich hatte das Problem, dass das Bild manchmal flackerte, weil es kaputt war oder nicht vollständig (hoch)geladen wurde. Um das Flackern zu verhindern, überprüfe ich die natürliche Höhe des Bildes, da sich die Größe meines Webcam-Bildes nicht geändert hat. Nur wenn die Höhe des geladenen Bildes mit der Höhe des Originalbildes übereinstimmt, wird das vollständige Bild auf der Seite angezeigt.

  <h3>Webcam</h3>
  <p align="center">
    <img id="webcam" title="Webcam" onload="updateImage();" src="https://www.your-domain.com/webcam/current.jpg" alt="webcam image" width="900" border="0" />

    <script type="text/javascript" language="JavaScript">

    // off-screen image to preload next image
    var newImage = new Image();
    newImage.src = "https://www.your-domain.com/webcam/current.jpg";

    // remember the image height to prevent showing broken images
    var height = newImage.naturalHeight;

    function updateImage()
    {
        // for sure if the first image was a broken image
        if(newImage.naturalHeight > height)
        {
          height = newImage.naturalHeight;
        }

        // off-screen image loaded and the image was not broken
        if(newImage.complete && newImage.naturalHeight == height) 
        {
          // show the preloaded image on page
          document.getElementById("webcam").src = newImage.src;
        }

        // preload next image with cachebreaker
        newImage.src = "https://www.your-domain.com/webcam/current.jpg?time=" + new Date().getTime();

        // refresh image (set the refresh interval to half of webcam refresh, 
        // in my case the webcam refreshes every 5 seconds)
        setTimeout(updateImage, 2500);
    }

    </script>
</p>

Answer 5

Das folgende Beispiel basiert stark auf dem Code von Doin #4 und vereinfacht diesen Code sehr stark, indem es document.write anstelle von src  im iframe CORS zu unterstützen. Außerdem wird nur der Cache des Browsers geleert und nicht jedes Bild auf der Seite neu geladen.

Der folgende Text ist in typescript und verwendet die angular $q Versprechen Bibliothek, nur fyi, aber sollte einfach genug sein, um Vanilla Javascript zu portieren. Methode soll innerhalb einer Typescript-Klasse zu leben.

Gibt ein Versprechen zurück, das aufgelöst wird, wenn der iframe das Neuladen abgeschlossen hat. Nicht stark getestet, aber funktioniert gut für uns.

    mmForceImgReload(src: string): ng.IPromise<void> {
        var deferred = $q.defer<void>();
        var iframe = window.document.createElement("iframe");

        var firstLoad = true;
        var loadCallback = (e) => {
            if (firstLoad) {
                firstLoad = false;
                iframe.contentWindow.location.reload(true);
            } else {
                if (iframe.parentNode) iframe.parentNode.removeChild(iframe);
                deferred.resolve();
            }
        }
        iframe.style.display = "none";
        window.parent.document.body.appendChild(iframe);
        iframe.addEventListener("load", loadCallback, false);
        iframe.addEventListener("error", loadCallback, false);
        var doc = iframe.contentWindow.document;
        doc.open();
        doc.write('<html><head><title></title></head><body><img src="' + src + '"></body></html>');
        doc.close();
        return deferred.promise;
    }