Mam problem z moją elastyczną wtyczką flexslider. Wtyczka działa dobrze, chyba że w rzeczywistym pokazie slajdów jest wiele obrazów. Zachowanie podczas ładowania jest wtedy nie do przyjęcia.

Miałem nadzieję, że ktoś może mi pomóc przy pomocy następującego skryptu preloadera obrazu flexslider, ponieważ nie mogę go uruchomić.

Oto kod, którego używam:

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

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

Każda pomoc jest doceniana!