Flexslider - Bild preloader

Ich habe ein problem mit meinem responsive flexslider plugin. Das plugin funktioniert gut, es sei denn, Sie haben viele Bilder in die eigentliche slideshow. Das Verhalten beim laden ist dann einfach nicht akzeptabel.

War ich hoffe jemand kann mir helfen, mit den folgenden flexslider image preloader script, da ich nicht bekommen kann es arbeiten.

Hier ist der code, den ich verwende:

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-SKRIPT 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 ist willkommen!

Diese Problemumgehung könnten auch Interesse : stackoverflow.com/a/12727900/1810012

InformationsquelleAutor Alex | 2012-07-20

  1. 4

    Anstelle der Verwendung der Schieberegler-Objekt aus flexslider, versuchen Sie einfach die Schieberegler-element selbst ein jQuery-Objekt.

    <!-- FlexSlider -->
<script type="text/javascript" charset="utf-8">
    $(window).load(function() {
       var target_flexslider = $('.flexslider');
       target_flexslider.flexslider({
           animation: "slide",  
           slideshow: false,
           controlsContainer: ".slider",

           start: function(slider) {
               target_flexslider.removeClass('loading');
           }

    });

});                    
</script>
    Was ist der Punkt von diesem? Es schafft nur noch die Seite, wenn der dom vollständig geladen ist
    Richtig, die Lösung ist nicht das, was in diesem Fall erwartet. Wir brauchen ein lazy loading script, nicht nur ein laden-Symbol (das ist trivial).

    InformationsquelleAutor Punch_Rockgroin

  2. 4

    Ich habe versucht, für die viele Zeit und bei mir funktionierte es so:

    <script type="text/javascript" charset="utf-8">
  $(window).load(function() {
    $('.flexslider').flexslider({
        start: function(slider) {
            slider.removeClass('loading');
    }  
});
});
</script>

    Und flexslider.css

    .loading {min-height: 300px; background: url('loader.gif') no-repeat center center !important;}

    Hinweis der "!wichtige" Teil, es funktionierte nicht ohne, denn es war eine Kollision mit flexslider die Standard-weißen hintergrund. Ich habe die html-wie

     <div class="flexslider loading">

    InformationsquelleAutor danielgc

  3. 0

    Habe ich es geschafft, um es arbeiten mit dem callback "vor" anstelle von "start".

    Also die JS-bit wäre:

    <!-- FlexSlider -->
<script type="text/javascript" charset="utf-8">
    $(window).load(function() {
      $('.flexslider').flexslider({
        animation: "slide",  
        slideshow: false,
        controlsContainer: ".slider"

        before: function(slider) {
          slider.removeClass('loading');
        }  
      });
    });                    

</script>

    InformationsquelleAutor acontia

  4. 0

    Versuchen Sie, für jede li 'style="display: none;"', mit Ausnahme der ersten li. Es sollte funktionieren.

    InformationsquelleAutor Andriniaina Rabarimisa

  5. 0

    War ich mit diesen zu kämpfen, auch, und die Antwort ist wirklich einfach in der Tat. Das einzige, was ist falsch im code ist dieser:

    <div class="flexslider loading" style="overflow-x: hidden; overflow-y: hidden; ">

    Und in der css definieren Sie für das laden der Klasse .laden

    So ändern Sie die Klasse für das div. Wie diese:

    <div class="loading" style="overflow-x: hidden; overflow-y: hidden; ">

    InformationsquelleAutor Marcelo Ezequiel Randazzo

Schreibe einen Kommentar