Flexslider - Preloader de imágenes

Question

Tengo un problema con mi complemento flexible de flexslider. El complemento funciona bien a menos que tenga muchas imágenes en la presentación de diapositivas real. El comportamiento de carga simplemente no es aceptable.

Esperaba que alguien me pudiera ayudar con el siguiente script de preloader de imagen flexslider ya que no puedo hacerlo funcionar.

Aquí está el código que estoy usando:

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 GUIÓN EN LA CABEZA 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;} 

Cualquier ayuda ¡es apreciado!

Answer 1

En lugar de usar el objeto deslizante de flexslider, intente simplemente convertir el elemento deslizante en un objeto 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

Pude hacerlo funcionar usando la devolución de llamada "antes" en lugar de "inicio".

Así que el bit de JS sería:

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

He intentado durante mucho tiempo y me funcionó así:

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

Y en flexslider.css

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

Tenga en cuenta la parte "! Important", no funcionó sin porque estaba colisionando con el fondo blanco predeterminado de flexslider. Establecí el html como

<div class="flexslider loading"> 

Answer 4

Intente agregar para cada li 'style = "display: none;"', excepto el primer li. Deberia de funcionar.

Answer 5

Estaba luchando con esto también, y la respuesta es realmente simple de hecho. La única cosa que está mal en el código es el siguiente:

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

Y en el CSS se define para la carga de la clase .loading

por lo que debe cambiar las clas para que div. De esta manera:

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