FlexSlider动态加载和删除无法正常工作的图像

Posted 2021-03-27

我有一个flexslider div-Element正常使用静态内容。但是，当我尝试使用jquery动态添加图像时，我会得到非常奇怪和不同的结果。

我在Leaflet侧边栏中使用了flexslider元素（正如我所说的那样使用静态内容）并在侧边栏完全展开后加载图像（使用sidebar.on（'shown'，function ...））。

加载函数看起来像这样：

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），但是它们不会显示在浏览器中。调用

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

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

我绝对无法解释这种行为。

答案

经过几个小时的测试和调试，我无法使用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);
}

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

另一答案

在尝试了很多不同的想法后，我得到了这个解决方案，可以动态地在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>

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