Flexslider - image preloader

Question

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.

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

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

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

Any help is appreciated!

Answer 1

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>

Answer 2

I tried for many time and for me it worked like this:

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

And on flexslider.css

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

Note the "!important" part, it didn't work without because it was colliding with flexslider's default white background. I set the html like

 <div class="flexslider loading">

Answer 3

I managed to get it working using the callback "before" instead of "start".

So the JS bit would be:

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

Answer 4

Try adding for each li 'style="display: none;"', except the first li. It should work.

Answer 5

I was struggling with this too, and the answer is really simple in fact. The only thing that is wrong in your code is this:

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

And in your css you define for loading the class .loading

So you must change the clas for that div. Like this:

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