Flexslider -предварительный загрузчик изображений

У меня проблема с адаптивным плагином flexslider. Плагин работает нормально, если у вас нет большого количества изображений в фактическом слайд-шоу. Тогда поведение загрузки просто неприемлемо.

Я надеялся, что кто-нибудь может помочь мне со следующим сценарием предварительной загрузки изображений flexslider, так как я не могу заставить его работать.

Вот код, который я использую:

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

Любая помощь приветствуется!