Aktualisieren eines Bildes, das regelmäßig neu hochgeladen wird

Question

Ich habe ein Webcam-Skript, das alle 10 Sekunden ein JPG per FTP an meinen Webserver sendet (und dabei das Original überschreibt).

Wie kann ich jQuery dazu bringen, das Bild zu aktualisieren? Ich habe es versucht:

window.onload = function() {
            $('body').prepend('<img id="cam" src="ww.jpg" alt="" />');
            setInterval(runAgain, 12500);
        };

        function runAgain() {
            $.ajax({
                url:'ww.jpg',
                cache:false,
                beforeSend:function() {
                    $('#cam').remove();
                },
                success:function() {
                    $('body').prepend('<img id="cam" src="ww.jpg" alt="" />');
                }
            });
        }

Hinweis: Ich möchte die Seite nicht aktualisieren, wenn ich es vermeiden kann.

Answer 1

Eine unsaubere Methode ist das Anhängen eines Zeitstempels oder einer Zufallszahl am Ende des Bildes src, um die Zwischenspeicherung zu verhindern, wie img src="bild.jpg?random=[RANDOM]" wobei [RANDOM] der Zeitstempel oder die Zufallszahl ist

Answer 2

Es sieht so aus, als ob Sie das Problem mit dem Caching haben - der Browser hat das Bild bereits im Cache und lädt es nicht erneut vom Server. Am einfachsten ist es, den Zufallsparameter hinzuzufügen, der den Browser glauben lässt, dass es sich um das andere Bild handelt:

...
url:'ww.jpg?' + Math.random()
...

Es ist möglich, den gleichen Effekt mit serverseitigen Tune-ups zu erzielen, aber dieser Weg ist wahrscheinlich am wenigsten störend und einfacher zu implementieren.

Answer 3

Sie müssen eigentlich nur die src . Natürlich sollten Sie eine Cache-Sammler um zu vermeiden, dass der Browser die Bildzerstörung zwischenspeichert. Eine Lösung wäre in diesem Fall ein zufälliger Query-String-Parameter.

$(function() {
    var $img = $('<img>', {
        src:  'ww.jpg'
    }).appendTo(document.body);

    setInterval(function() {
        $img.attr('src', function(_, src) {
            return [src, '?', ~~(Math.random() * 40000)].join('');
        });
    }, 12500);
});

Answer 4

function updateLogo() {
    var base_src = "http://www.google.com/logos/2011/graham11-hp-start.png";
    var logo = $('#logo');
    var timestamp = new Date().getTime();
    // uncomment the timestamp part if your server supports an extra parameter to prevent caching
    logo.attr('src', base_src);// + '?_ts=' + timestamp);
};

setInterval(updateLogo, 1000);

Wenn Ihr Server einen zusätzlichen Parameter in der Bild-URL unterstützt, verhindern Sie die Zwischenspeicherung des Bildes.