Question

Does anyone know what I’m doing wrong?

Basically I’m after loading content (an image) into a div tag, and then refreshing it every x seconds. So this is what I came up with, and it works great until it fades the file back in to which it does a manual refresh.

The current process looks like the following:

Load … fade out, fade in & then disappears and reappears a few seconds later.

What should be happening is the following:

Load … fade out, fade in … fade out, fade in … (you get the idea, looped)

The code:

$(document).ready(function () {
     $("#webcam").load("image.html").fadeIn("slow");
   var refreshId = setInterval(function() {
      $("#webcam_img").fadeOut("slow");
      $("#webcam").load('image.html');
      $("#webcam_img").fadeIn("slow");
   }, 5000);
});

The online file can be found here: http://colourednoise.co.uk/scripts/webcam.htm

Thank you

Answer 1

load is asynchronous. You are calling fadeIn on an element which is then replaced by the load. You need to fadeIn within the callback of load to ensure that the element exists.

$("#webcam").load('image.html', function(){
    $("#webcam_img").fadeIn("slow");
});