0

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

知道为什么会这样吗？

4

2 回答 2

2

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

尽管此方法位于循环方法之前，但它getJSON是异步方法，这就是循环在加载图像之前运行的原因。

解决方法：
1. 使用.ajax代替.getJSONwithasync: 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();
    });

此代码未经测试

于 2012-11-03T07:18:37.877 回答
0

要添加到上一个答案，您正在使用 $.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();

});
于 2012-11-03T07:35:30.480 回答