Question

我正在使用Bootstrap和LightSlider构建一个网站。它包含由js填充的LightSlider-gallerys。

我目前正在使用Brackets及其Chrome实时预览进行编码，并且工作正常。在Chrome的网络监视器中观看页面加载我可以看到它在加载html后成功加载了所有图像。

当我点击图库时，即使每秒5张幻灯片，Chrome和IE也没问题。相反，Firefox正在扫描旧图像，然后没有任何反应，下一张幻灯片在中心弹出，而不是滑入。在Firefox中观看网络监视器，它也表示图像正在加载......我不知道为什么这种情况正在发生。

以下是我的代码片段，因为外部库而无法让它们在JSFiddle中运行：

var i = 1;
    for (i; i <= image_count; i++) {
        $('<li><img src="http://lorempixel.com/400/200/"></li>').appendTo('#lightSlider');
    }
    var slider = $('#lightSlider').lightSlider({
        gallery: false,
        item: 1,
        loop: false,
        slideMargin: 0,

        autoWidth: false,
        slideMove: 1, // slidemove will be 1 if loop is true
        slideMargin: 10,

        speed: 400, //ms
        auto: false,
        pauseOnHover: true,
        slideEndAnimation: true,
        pause: 4000,

        addClass: 'style_slider',
        mode: "slide",
        useCSS: true,
        cssEasing: 'ease', //'cubic-bezier(0.25, 0, 0.25, 1)',//
        easing: 'linear', //'for jquery animation',////

        keyPress: true,
        pager: false,
        currentPagerPosition: 'middle',

        enableTouch:true,
        enableDrag:true,
        freeMove:true,
        swipeThreshold: 40,

        responsive : [
        ]

    });
    $('#goToPrevSlide').click(function(){
        slider.goToPrevSlide(); 
    });
    $('#goToNextSlide').click(function(){
        slider.goToNextSlide(); 
    });

< div class = "col-lg-12"
id = "col_lightSlider" >
  <!-- Begin LightSlider -->
  <
  ul id = "lightSlider" >
  <!-- Content is filled here -->
  <
  /ul>
  <!-- End LightSlider -->
  <
  a id = "goToPrevSlide"
class = "left carousel-control ctrl_left"
role = "button" >
  <
  span class = "glyphicon glyphicon-chevron-left"
aria - hidden = "true" > < /span> <
  span class = "sr-only" > Previous < /span> <
  /a> <
  a id = "goToNextSlide"
class = "right carousel-control ctrl_right"
role = "button" >
  <
  span class = "glyphicon glyphicon-chevron-right"
aria - hidden = "true" > < /span> <
  span class = "sr-only" > Next < /span> <
  /a>  <
  /div>
  <!-- Script is called here like this fill_data("path", imagecount)-->
  <
  script type = "text/javascript" >
  fill_data("MobileIron_ersteinrichtung", 34); <
/script>

图库图片在Chrome和IE中加载速度非常快，但在Firefox中却没有

0 个答案: