Flexslider - 图片预加载器

Question

我有一个关于响应式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脚本

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

非常感谢您的帮助！

- Alex

---

这个解决方法可能也会对你有所帮助： https://dev59.com/wWcs5IYBdhLWcg3wmlIK#12727900 - xaa

Answer 1

不要使用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>

- Punch_Rockgroin

---

这有什么意义呢？它仍然只在 DOM 完全加载时创建页面。 - Roland Schütz

对的，在这种情况下，解决方案并不是我们期望的。我们需要一个懒加载脚本，而不仅仅是一个加载图标（这很简单）。 - piotr.d

Answer 2

我尝试了很多次，对我而言它是这样工作的：

<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">

- danielgc

Answer 3

我也曾经为此苦恼，其实答案非常简单。你代码中唯一的问题就在于：

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

在你的 CSS 中，你定义了加载类 .loading

所以你必须更改该 div 的类。像这样：

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

- Marcelo Ezequiel Randazzo

Answer 4

尝试为每个li添加'style="display: none;"'，除了第一个li。它应该可以工作。

- Andriniaina Rabarimisa

Answer 5

我成功地使用回调函数“before”而不是“start”使其工作。

因此，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>

- acontia