FlexSlider動態加載和刪除圖像不工作

我得到了一個flexslider div元素與靜態內容正常工作。但是，當我嘗試使用jquery動態添加圖片時，我得到了非常奇怪和不同的結果。我使用Leaflet邊欄內的flexslider元素（就像我說的使用靜態內容一樣），並在邊欄完全展開後加載圖像（使用sidebar.on（'shown'，function ...））。FlexSlider動態加載和刪除圖像不工作

負載的功能看起來像這樣的：

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中加載的圖像，但在Chrome中不顯示他們要麼，即使它們添加到DOM兩個瀏覽器。但是，加載更多圖片並再次調用方法，在Firefox中再也沒有效果。

我絕對不能解釋這種行爲。

來源

2016-05-16 ltsstar

？ –

ajax調用來檢查圖像是否存在以及實際獲取它的負載。當然有更可行的方法，但裝載本身迄今爲止工作。 – ltsstar

試着把這行寫成：$（「＃flexslider」）。flexslider（）;''inside'error：function（）' –

經過幾個小時的測試和調試，我無法使它與flexSlider合作，並決定切換到bxslider。此外，我發現jQuery加載函數不僅觸發一次，而且幾次觸發，每次滑塊更改任何圖像參數時，這有時會導致添加越來越多的圖像。我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); 
}

是的，我現在爲什麼要使用$阿賈克斯和A $ .load扔了雙圖像加載遠:)

來源

2016-05-17 13:21:34 ltsstar

FlexSlider動態加載和刪除圖像不工作

回答

相關問題