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の代わりに使用.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();
    });

このコードはテストされていません

于 2012-11-03T07:18:37.877 に答える
0

前の答えに追加するには、$。getJSONで非同期リクエストを行っています

したがって、cycleが呼び出されているとき、リクエストからデータがまだ返されていません。つまり、期待どおりに「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 に答える