Flexslider-图像预加载器 [英] Flexslider - image preloader

问题描述

我的自适应flexslider插件有问题.除非您在实际的幻灯片放映中有很多图像，否则该插件可以正常工作.这样就无法接受加载行为.

I have a problem with my responsive flexslider plugin. The plugin works fine unless you have many images in the actual slideshow. The loading behavior is then just not acceptable.

我希望有人可以帮助我处理以下flexslider图像预加载器脚本，因为我无法使它正常工作.

I was hoping someone can help me with the following flexslider image preloader script since I can't get it to work.

这是我正在使用的代码:

Here is the code I'm using:

FLEXSLIDER HTML

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头中的FlexSLIDER脚本

FLEXSLIDER SCRIPT IN 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

FLEXSLIDER.CSS

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

感谢您的帮助！

推荐答案

而不是使用flexslider中的滑块对象，请尝试仅使滑块元素本身成为jQuery对象.

Instead of using the slider object from flexslider, try just making the slider element itself a jQuery object.

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

这篇关于Flexslider-图像预加载器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！