javascript - Refresh an image if new image is found -

javascript - Refresh an image if new image is found -

i refreshing images webcams every sec on app. problem have if few seconds image not retrieved photographic camera (which happens frequently) end broken image. have refreshes if , when new image found.

so far have

var int_time = setinterval(function() { var myimageelement = document.getelementbyid('myimage'); myimageelement.src = '<%= evercam_api %>cameras/<%= @camera["id"] %>/snapshot.jpg?api_id=<%= current_user.api_id %>&api_key=<%= current_user.api_key %>&rand=' + new date().gettime(); }, 1000);

is possible stop refresh if image not retrieved?

following snippet help.

solution:

1) create dynamic image object

2) bind onload event

3) set src of dynamically created image object desired new image link

4) on success of loading dynamic image, replace original tag or set src of original image tag latest image link

this avoid problem of broken image

code:

var int_time; (function(){ var el = document.getelementbyid('myimage'); function loadimage () { var img = new image() , src = '<%= evercam_api %>cameras/<%= @camera["id"] %>/snapshot.jpg?api_id=<%= current_user.api_id %>&api_key=<%= current_user.api_key %>&rand=' + new date().gettime();; img.onload = function() { if (!! el.parent) el.parent.replacechild(img, el) else el.src = src; } img.src = src; } int_time = setinterval(loadimage, 1000); }());

javascript image function refresh