Flexslider - 图像预加载器

我的应答flexslider插件有问题。该插件工作正常，除非您在实际幻灯片中有很多图像。加载行为是不可接受的。Flexslider - 图像预加载器

我希望有人可以帮我用下面的flexslider图像预加载器脚本，因为我无法让它工作。

这里是我使用的代码：

FLEXSLIDER HTML

<div class="slider"> 
    <div class="flexslider loading" style="overflow-x: hidden; overflow-y: hidden; "> 
     <ul class="slides" style="width: 5200%; -webkit-transition-duration: 0s; -webkit-transform: translate3d(-9702px, 0px, 0px); "> 

     <li style="float: left; display: block; width: 940px; "> 
     <img src="image1.jpg"> 
     </li> 
     <li style="float: left; display: block; width: 940px; "> 
     <img src="image2.jpg"> 
     </li>      
     <li style="float: left; display: block; width: 940px; "> 
     <img src="image3.jpg"> 

     </ul> 

    </div>

FLEXSLIDER脚本的HTML HEAD

<!-- FlexSlider --> 
<script type="text/javascript" charset="utf-8"> 
    $(window).load(function() { 
    $('.flexslider').flexslider({ 
    animation: "slide",   
    slideshow: false, 
    controlsContainer: ".slider" 

    start: function(slider) { 
    slider.removeClass('loading');} 

     }); 
});      

</script>

FLEXSLIDER.CSS

.loading {min-height: 300px; background: url('loader.gif') no-repeat center center;}

任何帮助感谢！

来源

2012-07-20 Alex

此变通办法也感兴趣的话： http://stackoverflow.com/a/12727900/1810012 – xaa 2014-01-24 11:17:33

不要使用flexslider中的滑块对象，只要将滑块元素本身设为jQuery对象即可。

<!-- FlexSlider --> 
<script type="text/javascript" charset="utf-8"> 
    $(window).load(function() { 
     var target_flexslider = $('.flexslider'); 
     target_flexslider.flexslider({ 
      animation: "slide", 
      slideshow: false, 
      controlsContainer: ".slider", 

      start: function(slider) { 
       target_flexslider.removeClass('loading'); 
      } 

    }); 

});      
</script>

来源

2012-08-03 17:04:53

什么的这点？它仍然只在dom完全加载时创建页面。 – 2013-02-08 00:05:45

对，这种情况下解决方案并非如此。我们需要一个懒惰的加载脚本，而不仅仅是一个加载图标（这很简单）。 – 2013-07-30 09:22:22

我设法让它使用回调“之前”而不是“开始”。

所以JS位将是：

<!-- FlexSlider --> 
<script type="text/javascript" charset="utf-8"> 
    $(window).load(function() { 
     $('.flexslider').flexslider({ 
     animation: "slide", 
     slideshow: false, 
     controlsContainer: ".slider" 

     before: function(slider) { 
      slider.removeClass('loading'); 
     } 
     }); 
    });      

</script>

来源

2013-03-08 09:56:44

我尝试了很多时间，对我来说它的工作是这样的：

<script type="text/javascript" charset="utf-8"> 
    $(window).load(function() { 
    $('.flexslider').flexslider({ 
     start: function(slider) { 
      slider.removeClass('loading'); 
    } 
}); 
}); 
</script>

而且在flexslider.css

.loading {min-height: 300px; background: url('loader.gif') no-repeat center center !important;}

请注意“！important”部分，它没有工作，因为它与flexslider的默认白色背景相碰撞。我设置的HTML像

<div class="flexslider loading">

来源

2013-03-22 06:39:59 danielgc

尝试添加每个li'style =“display：none;”'，除了第一个li。它应该工作。

来源

2013-04-19 13:13:54

我也在为此苦苦挣扎，其实答案其实很简单。那是错在你的代码的唯一事情是这样的：

<div class="flexslider loading" style="overflow-x: hidden; overflow-y: hidden; ">

而且在你的CSS定义为加载类.loading

所以，你必须改变CLAS该股利。就像这样：

<div class="loading" style="overflow-x: hidden; overflow-y: hidden; ">

来源

2015-10-29 15:36:52

Flexslider - 图像预加载器

回答

相关问题