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

【问题标题】：Cycle plugin: cycling through divs, "too few slides"?Cycle 插件：通过 div 循环，“幻灯片太少”？
【发布时间】：2012-11-03 15:35:30
【问题描述】：

我正在使用 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

知道为什么会这样吗？

【问题讨论】：

标签： jquery html jquery-cycle

【解决方案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();
    });

此代码未经测试

【讨论】：

【解决方案2】：

要添加到以前的answer，您正在发出一个异步请求 $.getJSON

所以当循环被调用时，请求还没有返回任何数据，这意味着没有 html 被附加到 'div#slideshow' 中，所以正如预期的那样

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

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

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

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

});

【讨论】：