FlexSlider lädt und löscht Bilder dynamisch und funktioniert nicht

Question

Ich habe ein flexslider div-Element, das korrekt mit statischem Inhalt funktioniert. Wenn ich jedoch versuche, Bilder dynamisch mit jquery hinzuzufügen, bekomme ich extrem seltsame und unterschiedliche Ergebnisse.

Ich benutze das flexslider Element innerhalb einer Leaflet Sidebar (was, wie gesagt, mit statischem Inhalt arbeitet) und lade die Bilder nachdem die Sidebar komplett expandiert ist (mit sidebar.on ('showed', function ...)).

Die Ladefunktion sieht aus wie diese:

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 lädt die Bilder und fügt sie der flexslider Klasse (DOM), aber sie are't im Browser angezeigt.

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

jetzt Aufruf zeigt die geladenen Bilder in Firefox, aber zeigt sie auch nicht in Chrome, obwohl sie auf das DOM in beiden Browsern hinzugefügt werden. Aber mehr Bilder laden und die Methode ein zweites Mal aufrufen, hat keine Wirkung mehr in Firefox.

Ich kann absolut nicht, dieses Verhalten erklären.

Answer 1

Nach mehreren Stunden Test und Debugging konnte ich nicht mehr mit flexSlider arbeiten und entschied mich für bxslider. Außerdem habe ich herausgefunden, dass die Funktion jquery load nicht nur einmal, sondern mehrmals ausgelöst wird und jedes Mal, wenn der Schieberegler einen Bildparameter ändert, was manchmal dazu führt, dass mehr und mehr Bilder hinzugefügt werden. ich workarounded dies mit diesem Code:

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); 
} 

Und ja, ich warf nun das Doppelbild Laden :) weg