FlexSliderが動的に画像をロードしたり削除したりしています

Question

静的コンテンツでflexslider div-Elementが正しく動作しています。 しかし、jqueryを使って画像を動的に追加しようとすると、私は非常に奇妙で変化する結果を得ます。

私は、サイドバーが完全に展開された後で（サイドバーを使用して、 '表示'、機能...）、リーフレットのサイドバー内で使用します）。

ロード機能は、この1のようになります。

this.loadImages = function(osm_id) { 
    var nextImage = true; 
    var counter = 1; 

    while (nextImage) { 
     var li = null; 
     $.ajax({ 
      async : false, 
      url : '/img/locations/'+osm_id+'/'+counter+'.jpg', 
      type : 'HEAD', 
      error : function() { 
       nextImage = false; 
      }, 
      success : function() { 
       var path = '/img/locations/'+osm_id+'/'+counter+'.jpg'; 
       $('<img src="'+path+'">').load(function() { 
        var li = $("<li></li>"); 
        $(this).appendTo(li); 
        li.appendTo($("#locationSlides")); 
       }).ready(function() { 
        $("#flexslider").data("flexslider").addSlide(li); 
       }); 
       counter++; 
      } 
     }); 
    } 

} 

jQueryの画像をロードし、flexsliderクラス（DOM）、しかし、彼らはブラウザに表示されるare'tに追加します。

$("#flexslider").flexslider(); 

を呼び出す は現在、Firefoxで読み込んだ画像を示しているが、彼らは両方のブラウザでDOMに追加されていても、いずれかのChromeでそれらを表示しません。 しかし、もっと多くの写真を読み込んでもう一度メソッドを呼び出すと、Firefoxではもう何も効果がありません。

私は絶対にこの動作を説明することはできません。

Answer 1

数時間のテストとデバッグの後、私はflexSliderで動作させることができず、bxsliderに切り替えることにしました。 さらに、jquery load関数は、スライダがイメージパラメータを変更するたびに1回だけでなく数回起動されることを発見しました。これにより、イメージが追加されることがあります。 私はこのコードでこれをworkarounded：

var errorOccured = false; 
var loadNextImage = function(osm_id, id) { 
    var path = '/img/locations/'+osm_id+'/'+id+'.jpg'; 
    $('<img src="'+path+'">').load(function() { 
     if(errorOccured) 
      return; 
     var li = $("<li></li>"); 
     li.appendTo($("#bxslider")); 
     $(this).appendTo(li); 

     loadNextImage(osm_id, id + 1); 
    }).error(function() { 
     errorOccured = true; 
     $("#bxslider").bxSlider({ 
      slideWidth : 300, 
      adaptiveHeight : true 
     }); 
    }); 
}; 

this.loadImages = function(osm_id) { 
    var nextImage = true; 
    var counter = 1; 

    errorOccured = false; 
    $("#flexsliderContainer").empty(); 
    $("#flexsliderContainer").append("<ul id=\"bxslider\"></ul>"); 


    loadNextImage(osm_id, counter); 
} 

そして、はい、私は今、なぜあなたは$のアヤックスと$ .LOADを使用している離れて:)