Flexslider - preloader immagine

Question

Ho un problema con il mio plugin flexslider reattivo. Il plugin funziona bene a meno che tu non abbia molte immagini nella presentazione reale. Il comportamento di caricamento non è quindi accettabile.

Speravo che qualcuno potesse aiutarmi con il seguente script del preloader di immagini flexslider poiché non riesco a farlo funzionare.

Ecco il codice che sto utilizzando:

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 IN TESTA HTML

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

Qualsiasi aiuto è apprezzato!

Answer 1

Invece di utilizzare l'oggetto slider da flexslider, provare a rendere l'elemento slider stesso un oggetto jQuery.

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

Answer 2

Sono riuscito a farlo funzionare utilizzando la richiamata "prima" invece di "start".

Così il bit JS sarebbe:

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

Answer 3

ho provato per molti tempo e per me ha funzionato così:

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

E su flexslider.css

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

Nota la parte "! Important", non ha funzionato senza perché era in collisione con lo sfondo bianco predefinito di flexslider. Ho impostato il codice HTML come

<div class="flexslider loading"> 

Answer 4

Prova ad aggiungere per ogni li 'style = "display: none;"', tranne la prima li. Dovrebbe funzionare.

Answer 5

Anche io stavo lottando con questo, e la risposta è davvero semplice. L'unica cosa che è sbagliato nel codice è questo:

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

E nel CSS si definisce per il caricamento della classe .loading

Quindi è necessario modificare la clas per questo div. Come questo:

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