My situation (very simplified) is as follows :
- In a single page i have n ipcam objects. Every ipcam object has its own div , where the image of the ipcam is updated each time the previous image is received.
- a javascript function call a php file (passing the id of the ipcam as parameter) that return the image with a socket request (after picking the settings for that particular id [ip, port, authentication, username, password etc etc]).
Javascript code (simplified)
//called by a timer
function refresh_ipcam(id){
if(parseInt($("#"+id).attr('refresh_finished')) == 1){
$("#"+id).attr('refresh_finished',0);
var img = new Image(....);
var x = new Date().getTime();
img.src = "get_image.php?id="+id+"&random="+x;
img.onload = function(){
$("#"+id).html(img);
$("#"+id).attr('refresh_finished',1);
}
img.onerror = function(e){
setTimeout(function(e){
$("#"+id).attr('refresh_finished',1);
},2000)
}
}
}
By adding the random parameter, the browser always detects a new image. In this way i solved a problem (the image was not updated correctly for cache issues). But i think there is another kind of problem in this way, given the high number of requests made.
Some user have reported the block of the browser (after some time). Can this be a problem related to a full cache?
From the google chrome console , in the Application > Frames > Images section, i noticed that every request (get_image.php) matches a new element in this list.
