jQuery自动刷新div故障

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

Try moving your fadein inside the callback function for the fadeOut so it waits until fadeout is complete first

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

Here's the full example

$(document).ready(function () {
   $("#webcam").load("image.html").fadeIn("slow");
   var refreshId = setInterval(function() {
      $("#webcam_img").fadeOut("slow",function(){ // <-- added callback function
         $("#webcam").load('image.html'); // now this
         $("#webcam_img").fadeIn("slow"); // and this waits for fadeOut to complete first  
      });
   }, 5000);
});

Answer 2

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");
});

Answer 3

Here is a slightly different way to do it, ensuring that each image is fully loaded before the next refresh gets queued:

$(document).ready(function () {
    $("#webcam").load("image.html").fadeIn("slow", function () { setTimeout(refreshImage, 5000) });

    function refreshImage() {
        $("#webcam_img").fadeOut("slow",function(){
            $("#webcam").load('image.html');
            $("#webcam_img").fadeIn("slow", function() { setTimeout(appendDateToBody, 5000) });
        });
    }
});