Tengo un problema con mi complemento flexible flexslider. El complemento funciona bien a menos que tenga muchas imágenes en la presentación de diapositivas real. El comportamiento de carga simplemente no es aceptable.

Esperaba que alguien pudiera ayudarme con la siguiente secuencia de comandos del precargador de imagen flexslider, ya que no puedo hacer que funcione.

Aquí está el código que estoy usando:

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

Cualquier ayuda es apreciada!