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

因此，当调用循环时，尚未从请求返回任何数据，这意味着没有在'div＃slideshow'中添加html，因此符合预期

[循环]终止;幻灯片太少：0

解决此问题：在异步请求完成后运行循环。我不建议进行同步通话

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

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

});

循环插件：在div中骑行，＆＃34;幻灯片太少＆＃34;？

2 个答案: