循环插件：通过div循环，“幻灯片太少”？

Question

我正在使用Cycle来尝试循环通过另一个jQuery函数生成的一些div。这里的功能：

$.getJSON('../functions.php', function(images) { 
    $.each(images, function() { 
    $('#slideshow').append('<div class="slide" style="background-image:url(' + this + ');"></div>'); 
    }); 
}); 

我有一个奇怪的问题。 DIV正在出现，如果我使用Chrome Inspector，我可以看到它们，但如果我明确查看源代码，它们不会显示出来。也许这并不重要，但是当我运行：

$('#slideshow').cycle(); 

我得到了，说控制台的错误：

[周期]终止;过几张幻灯片：0

您可以看到网站住在这里：http://new.element17.com

任何想法，为什么发生这种情况？

Answer 1

原因是您正在使用getJSON方法填充幻灯片图像。

即使此方法位于循环方法之前，getJSON是异步方法，这就是为什么循环在加载图像之前运行的原因。

解决方案：
1.使用.ajax代替.getJSON与async: false

$.ajax({ 
    async: false, 
    url: '../functions.php', 
    success: function() { 
     $.each(images, function() { 
      $('#slideshow').append('<div class="slide" style="background-image:url(' + this + ');"></div>'); 
     }); 
    } 
}); 

2移动$('#slideshow').cycle();内.getJSON方法，因此图像加载后运行。

$.getJSON('../functions.php', function(images) { 
    $.each(images, function() { 
      $('#slideshow').append('<div class="slide" style="background-image:url(' + this + ');"></div>'); 
     }); 
     $('#slideshow').cycle(); 
    }); 

此代码是没有测试

Answer 2

要添加到以前answer，你打的是 $ .getJSON

所以，当周期被调用，没有数据的异步请求尚未返回请求，意思是没有html被添加到'div＃slideshow'里面，所期望

[c ycle]终止;过几张幻灯片：0

要解决这个问题：异步请求完成运行周期之后。我不会建议做同步呼叫

$.getJSON('../functions.php', function(images) { 
    $.each(images, function() { 
     $('#slideshow').append('<div class="slide" style="background-image:url(' + this + ');"></div>'); 
    }); 

    $('#slideshow').cycle(); 

});