Question

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

我在Leaflet侧边栏中使用了flexslider元素（正如我所说的那样使用静态内容）并在侧边栏完全展开后加载图像（使用sidebar.on（'shows'，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不再有任何影响。

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

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代码：

import plotly.plotly as py
import plotly
import matplotlib.pyplot as plt 

countries = ['Australia', 'Austria', 'Belgium', 'Canada', 'China, Hong Kong SAR', 'Denmark', 'France', 'Germany', 'Greece', 'Italy', 'Luxembourg', 'Morocco', 'Netherlands', 'Norway', 'Spain', 'Sweden', 'Switzerland', 'Tunisia', 'Turkey', 'United Kingdom', 'United States of America']

origins = ['Various/Unknown', 'Various/Unknown', 'Various/Unknown', Various/Unknown', 'Various/Unknown', 'Various/Unknown', 'Various/Unknown', 'Various/Unknown', 'Various/Unknown', 'Various/Unknown', 'Various/Unknown', 'Various/Unknown', 'Various/Unknown', 'Various/Unknown', 'Various/Unknown', 'Various/Unknown', 'Various/Unknown', 'Various/Unknown', 'Various/Unknown', 'Various/Unknown', 'Various/Unknown']

values = [180000, 282000, 55000, 168511, 30000, 2000, 290000, 265000, 18000, 26500, 1800, 3000, 14200, 2500, 2000, 44000, 10000, 2000, 2700, 208000, 350000]

colors = ['#262C46', '#262C46', '#262C46', '#262C46', '#262C46', '#262C46', '#262C46', '#262C46', '#262C46', '#262C46', '#262C46', '#262C46', '#262C46', '#262C46', '#262C46', '#262C46', '#262C46', '#262C46', '#262C46', '#262C46', '#262C46']


plotly.offline.init_notebook_mode()
data_trace = dict(
    type='sankey',
    domain = dict(
      x =  [0,1],
      y =  [0,1]
    ),
    orientation = "h",
    valueformat = ".0f",
    node = dict(
      pad = 10,
      thickness = 30,
      line = dict(
        color = "black",
        width = 0
      ),
      label =  values,
      color = colors
    ),
    link = dict(
      source = origins,
      target = countries,
      value = values,
      color = colors
  )
)

layout =  dict(
    title = "Refugee Flow",
    height = 772,
    font = dict(
      size = 10
    ),    
)

fig = dict(data=[data_trace], layout=layout)
plotly.offline.iplot(fig)

HTML代码：

 $("#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);
        }
    });

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

FlexSlider动态加载和删除无效的图像

2 个答案: