CODEWITHSUNDEEP
javascriptjqueryhtmlimage
joedborg
joedborg

Reputation: 18353

Refresh <img> in jQuery periodically

Similar to How to reload/refresh an element(image) in jQuery but not at the same time.

I have a webcam that saves images every 2 seconds rather than streaming. Using jQuery (or straight JS) I want to refresh just the image element.

Should be easy, but all my searches show the refresh on request.

Upvotes: 10

Views: 21785

Answers (5)

Simone Gianni
Simone Gianni

Reputation: 11672

You must force the browser to realod the image instead of taking it from cache. You can do it by changing the url, adding a useless parameter that changes each time, for example a timestamp.

$('img.webcam').each(function() {
    var jqt = $(this);
    var src = jqt.attr('src');
    src = src.substr(0,src.indexOf('?'));
    src += '?_ts=' + new Date().getTime();
    jqt.attr('src',src);
});

Execute this snippet inside a timer or on a click or both or whatever.

Upvotes: 3

Joe
Joe

Reputation: 82654

setInterval is a timer that will execute a function everything x milliseconds

setInterval(function () {
    var d = new Date();
    $("#myimg").attr("src", "/myimg.jpg?"+d.getTime());
}, 2000);

Upvotes: 3

ShankarSangoli
ShankarSangoli

Reputation: 69915

Add a timestamp to the image source it will refresh.

setInterval(function(){
    $("img").each(function(){
       var timeStamp = (new Date()).getTime();
       $(this).attr("src", $(this).attr("src") + timeStamp );
    });
}, 2000);

Upvotes: 1

Niko
Niko

Reputation: 26730

This should do the job:

window.setInterval(function() {
    var d = new Date();
    $("#myimg").attr("src", "/myimg.jpg?"+d.getTime());
}, 2000);

Upvotes: 2

Andy
Andy

Reputation: 30135

setInterval(function(){
    $("#myimg").attr("src", "/myimg.jpg?"+new Date().getTime());
},2000);

Upvotes: 16

Related Questions