Flexslider - image preloader
flexslider, image-preloader
Solution
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>
Problem
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!