image-preloader - Flexslider - 图像预加载器

Question

我的响应式 flexslider 插件有问题。除非您在实际幻灯片中有许多图像，否则该插件可以正常工作。加载行为是 Not Acceptable 。

我希望有人可以帮助我使用以下 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;}

任何帮助表示赞赏!

Answer 1

不要使用 flexslider 中的 slider 对象，而是尝试使 slider 元素本身成为一个 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>