Reload image after it has loaded (jquery/javascript)

Question

I would like to reload an image which is constantly updated on the server. So far I have only tried:

setInterval(function(){
        if ($("#stream").data("loaded")) {
            $("#stream").attr("src", "http://keshira.com:8080/?action=snapshot&" + new Date().getTime());
        }
},100);

<img id="stream" onload="$(this).data('loaded', 'loaded');" src="http://keshira.com:8080/?action=snapshot"/>

Unfortunately this also keeps refreshing the image every 100ms. My problem is that I would like to load new images as fast a possible. So using a larger time interval is no option. Any thoughts are highly appreciated.

So does this code work? Do you want to update images more often or what? — Ilya Luzyanin
– Ilya Luzyanin, Commented Aug 9, 2014 at 14:30
The code updates the image constantly. It should only update the image if the last image has fully loaded. — Philipp Braun
– Philipp Braun, Commented Aug 9, 2014 at 14:38

Ilya Luzyanin · Accepted Answer · 2014-08-09 15:11:43Z

3

Try using load event a bit different:

$("#stream").on('load', function() {
    $("#stream").attr("src", "http://keshira.com:8080/?action=snapshot&" + new Date().getTime());
});

Here is demo. I use setTimeout there only to limit it somehow, but you can remove it.

answered Aug 9, 2014 at 15:11

Ilya Luzyanin

8,1184 gold badges32 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Philipp Braun Over a year ago

thanks simply didn't have enough knowledge of jquery.

Collectives™ on Stack Overflow

Reload image after it has loaded (jquery/javascript)

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related