Question

有谁知道我做错了什么？

基本上我是在将内容（图像）加载到div标签中，然后每隔x秒刷新一次。所以这就是我想出来的，它可以很好地工作，直到它将文件淡入其中进行手动刷新。

目前的流程如下：

加载...淡出，淡入＆amp;然后消失，几秒钟后重新出现。

应该发生的事情如下：

加载...淡出，淡入...淡出，淡入...（你明白了，循环播放）

代码：

$(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

尝试在fadeOut的回调函数中移动你的fadein，这样它就会等到fadeout先完成

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

jQuery自动刷新div故障

3 个答案: