Firefox, iOS Safari not changing img src more that once with jquery

Question

I'm trying to change the src attribute from a img tag with JQuery every second. Works great on Google Chrome and every second a new image appers. But do not work on Firefox, or my iPad. Only changes the image once.

This is the code i'm using:

$(document).ready(function(){
    function refreshIMG(){
        $("#camara").attr("src", "localhost:4000");
    }
});
window.setInterval(refreshIMG, 1000)

On localhost:4000 i'm runnig a tornado server and saving and image of my webcam with openCV. I know this is working because it works on Google Chrome, and I saves the image on my HDD. Also add and alert("test") to the refreshIMG function and every second the alert shows on firefox and my iPad2 but the image do not changes.

Tested on Firefox 11, ipad with iOS 5.1, Chrome 18. Ubuntu 11.10

Answer 1

Is it possible that these other browsers are detecting that the src is the same, so it doesn't change anything?

Try adding ?time=" + new Date().getTime() to your src. I would also recommend moving the setInterval inside the $(document).ready() just in case it tries to execute refreshIMG() before it exists because the DOM isn't ready (not likely, but good practices). The final product would be something like:

$(document).ready(function(){
    function refreshIMG(){
        $("#camara").attr("src", "localhost:4000?time=" + new Date().getTime());
    }
    window.setInterval(refreshIMG, 1000);
});

This may "trick" those browsers into thinking it's a completely different image and refreshing it.

Otherwise, you might try an AJAX call to a page where the only content is <img src="localhost:4000"> and then replacing that HTML with the HTML from the current image.