FlexSlider 动态加载和删除图像不起作用

Question

我有一个 flexslider div-Element 可以正常处理静态内容。但是，当我尝试使用 jquery 向其中动态添加图像时，我得到了非常奇怪且变化多端的结果。

我在 Leaflet 侧边栏中使用 flexslider 元素（正如我所说的使用静态内容）并在侧边栏完全展开后加载图像（使用 sidebar.on('shown',函数...)).

加载函数如下所示：

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 class (DOM)，但是，它们不会显示在浏览器中。打电话

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

现在在 Firefox 中显示加载的图像，但在 Chrome 中也不显示它们，即使它们已添加到两个浏览器的 DOM 中。但是加载更多图片并再次调用该方法，在 Firefox 中也没有效果。

我完全无法解释这种行为。

Answer 1

经过几个小时的测试和调试，我无法让它与 flexSlider 一起工作，因此决定切换到 bxslider。此外，我发现 jquery 加载函数不仅触发一次，而且触发多次，每次滑块更改任何图像参数时，有时都会导致添加越来越多的图像。我用这段代码解决了这个问题：

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

是的，我现在扔掉了双图像加载:)

Answer 2

在尝试了很多不同的想法之后，我得到了这个解决方案，可以在 Flexslider 中动态添加新图像或视频，并且效果很好。

JQuery代码：

 $("#add2").change(function(event)
    {
          var fuData = document.getElementById('add2');
          var files = event.target.files;
           for(var i = 0; i< files.length; i++)
        {
            var file = files[i];
            var filename = file.name;
            var Extension =
filename.substring(filename.lastIndexOf('.') + 1).toLowerCase();
            if(Extension == 'png' || Extension == 'jpg' || Extension == 'jpeg' || Extension == 'svg'){
                var reader = new FileReader();
                reader.onload = function(e)
                {
                      var img = document.createElement("IMG");
                      img.src = e.target.result;

                      div = "<li><img src="+img.src+" /></li>";
                      $('.flexslider').data('flexslider').addSlide($(div));

                }
            }

            else if (Extension == 'mp4')
            {
                var reader = new FileReader();
                reader.onload = function(event){
                    var video = document.createElement("video");
                    video.src = event.target.result;

                    div = " <li><video src="+video.src+" width='100%' height='500' controls></video></li>";
                    $('.flexslider').data('flexslider').addSlide($(div));
                }
            }
            else
            {
              alert(filename+' '+'is not in supported format');
              $("#add2").val('');
            }
            reader.readAsDataURL(file);
        }
    });

HTML代码：

<input type="file" id= "add2" multiple>

首先，它会检查你的文件的扩展名，如果是图片则进入第一个循环，如果是视频则进入第二个循环。我在 it.You 中完成了基本实现，可以根据您的要求自定义此代码。

FlexSlider 动态加载和删除图像不起作用

FlexSlider dynamically loading and removing images not working

ajax

jquery

flexslider

leaflet