jQuery自動刷新div故障

Question

有人知道我在做什么錯嗎？

基本上，我是在將內容（圖像）加載到div標簽后，然后每隔x秒刷新一次。 因此，這就是我想出的方法，它可以很好地起作用，直到將文件淡入並手動刷新之前。

當前過程如下所示：

載入...逐漸消失，逐漸消失，然后消失，然后在幾秒鍾后重新出現。

應該發生以下情況：

載入...淡出，淡入...淡出，淡入...（您明白了，循環了）

編碼：

$(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);
});

可以在這里找到在線文件： http : //colourednoise.co.uk/scripts/webcam.htm

謝謝

Answer 1

嘗試將淡入移入淡出的回調函數中，以便等到淡出先完成

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

這是完整的例子

$(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是異步的。 您正在對元素調用fadeIn ，然后將其替換為load 。 您需要fadeIn的回調中load ，以確保該元素存在。

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

Answer 3

這是一種稍微不同的方法，可確保在下次刷新進入隊列之前，每個映像都已完全加載：

$(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) });
        });
    }
});