6

我的响应式 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>

HTML HEAD 中的 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;}

任何帮助表示赞赏！

4

5 回答 5

4

不要使用 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-03T17:04:53.837 回答
4

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

<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-22T06:39:59.277 回答
0

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

所以 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-08T09:56:44.413 回答
0

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

于 2013-04-19T13:13:54.163 回答
0

我也在为此苦苦挣扎，实际上答案很简单。您的代码中唯一错误的是：

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

在你的css中你定义加载类 .loading

因此，您必须更改该 div 的类。像这样：

<div class="loading" style="overflow-x: hidden; overflow-y: hidden; ">
于 2015-10-29T15:36:52.317 回答