循環插件：通過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(); 

});