Question

So I’ve got a basic system set up to reload webcam jpgs at a regular interval, but it’s weird to see the file load. I’d rather have one fade into the other or at least wait for the whole image to load before it swaps the other one out.

     $(document).ready(function() {
        setInterval('updateCamera()',1000);
});

function updateCamera() {
        $('#camera').attr('src','cam_1.jpg?'+ new Date().getTime());
        }

Here is the site, click on “Live Feed” http://www.graysonearle.com/frogutopia Any ideas?

Answer 1

You can try something like this

 $(document).ready(function() {
     setTimeout('updateCamera()',1000); // Just call one time on dom ready using setTimeout()
 });

function updateCamera() {
     $('#camera').attr('src','cam_1.jpg?'+ new Date().getTime()).load(function() {
        updateCamera(); // then call updateCamera() each time after image load complete
     });
}