Flexslider lädt zu langsam - Content verschiebt sich

[lenchenx3]

Hallo,

Ich benutze den Flexslider direkt unter meiner Navigation.(verwende zudem Bootstrap 3) Das Problem welches ich jetzt habe, ist das beim Laden, der Flexslider meistens zu langsam lädt und der Content der unter dem Slider folgt, schiebt sich somit am anfang nach oben und überlagert mit der Navigation. Sobald der Flexslider dann geladen ist, rutscht alles wieder in die richtige Position.

Jetzt habe ich schon probiert dem Flexslider eine feste Höhe zu geben, was nicht funktioniert hat. Dann habe ich versucht den Abstand vom content unter dem Flexslider nach oben immer gleich zu halten, aber das funktioniert auch nicht so ganz, denn wenn ich das Browserfenster vergrößer / verkleinere stimmen die Abstände nie genau. (Es soll ein responsive Design werden)

Nun weiß ich nicht wie ich das genau läsen kann und dachte daran, evtl. ein Bild vom ersten Slider zu erstellen, welches ich dann an die Stelle vom Flexslider stelle und dieses soll dann durch den Flexslider ersetzt werden, sobald der geladen ist. Allerdings weiß ich nicht genau wie ich das am besten mache.

Hier wäre der HTML teil :

<div class="flexslider">
        <ul class="slides">
            <li>
                <img src="images/Slider/Earth_slider.png" alt="Earth"/>
                <figcaption class="flex-caption-middle">
                    <p><h2 class="header-flex">VIDEO, WEB, SERVICE<br>für Raumfahrt, öffentliche Einrichtungen & Industrie</h2></p>
                </figcaption>
            </li>
            <li>
                <img src="images/Slider/Rosetta_slider.png" alt="Rosetta" />
                <figcaption class="flex-caption">
                    <p><h2 class="header-flex">Die Reise des Satelitten Rosetta</h2></p>
                </figcaption>
            </li>
            <li>
                <img src="images/Slider/Showreel_slider.png" alt="Showreel"/>
                <figcaption class="flex-caption">
                    <p><h2 class="header-flex">Showreel 2014</h2></p>
                </figcaption>
            </li>
            <li>
                <img src="images/Slider/DLR_slider.png" alt="DLR"/>
                <figcaption class="flex-caption">
                    <p><h2 class="header-flex">DLR-DVD "Mars-Ein Planet voller Rätsel"</h2></p>
                </figcaption>
            </li>
            <li>
                <img src="images/Slider/ECMWF_slider.png" alt="ECMWF"/>
                <figcaption class="flex-caption">
                    <p><h2 class="header-flex">Weltmarktführer ECMWF</h2></p>
                </figcaption>
            </li>
        </ul>
    </div>

 

[Sempervivum]

Ich dachte erst daran, dem div des Sliders eine Höhe zu geben, aber das scheitert wohl daran, dass er responsiv ist. Wenn Du ein Bild verwenden würdest, hättest Du das selbe Problem. Du könntest aber versuchen, diesem Hinweis auf der Homepage des Sliders nachzugehen:
// Can also be used with $(document).ready()
vielleicht verbessert sich das Verhalten dadurch.

 

[kkapsner]

Zeig' doch mal einen Testlink, wo wir uns ein genaueres Bild machen können.

 

[rico2009]

"Lädt zu langsam" kann viele Gründe haben, z.B. sehr große Bilder, schlechte Internetverbindung, schlechte Programmierung, usw. Ein Testlink, wie von kkapsner vorgeschlagen würde in der Tat helfen.