Ich habe ein Problem mit meinem reaktionsfähigen Flexslider-Plugin. Das Plugin funktioniert einwandfrei, es sei denn, Sie haben viele Bilder in der eigentlichen Diashow. Das Ladeverhalten ist dann einfach nicht akzeptabel.

Ich hatte gehofft, dass mir jemand mit dem folgenden FlexSlider-Image-Preloader-Skript helfen kann, da ich es nicht zum Laufen bringen kann.

Hier ist der Code, den ich benutze:

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 IM HTML-KOPF

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

Jede Hilfe wird geschätzt!