Flexslider - image preloader

喜你入骨 提交于 2019-12-03 14:40:22
Punch_Rockgroin

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>

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

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>

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

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; ">
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!