jquery - sencillo - Flexslider carga de imagen lenta

slider de informacion jquery

Question

Estoy usando Flexslider en un sitio web que estoy construyendo.

Me gusta mucho la capacidad de respuesta y esa es la razón por la que no quiero cambiar a nivo-slider o algo similar.

Lo negativo es que no muestra la primera imagen antes de que se carguen todas las imágenes. Así que tienes que esperar a que todas las imágenes en el control deslizante se carguen para que el sitio se vea correctamente. Esto es aceptable en una computadora de escritorio / portátil pero no en un dispositivo móvil.

Encontré una pregunta similar aquí Flexslider - precargador de imágenes pero no pude hacer que funcionara.

Yo uso esto para activar el código

$(window).load(function() {
$(''.flexslider'').flexslider();
});

Y esto en mi HTML.

 <ul class="slides">
<li>
<img src="pictures/slide1.jpg" alt=" ">
<li>
<img src="pictures/slide2.jpg" alt=" ">
</li>
<li>
<img src="pictures/slide3.jpg" alt=" ">
</li>
<li>
<img src="pictures/slide4.jpg" alt=" ">
</li>
</ul>

La pregunta es. ¿Cómo puedo hacer que el deslizador muestre la primera imagen lo más rápido posible? y luego el segundo y así sucesivamente.

EDIT: resolví el problema. Se presenta en la respuesta correcta a continuación. Si tienes una solución mejor: por favor comparte: D

Answer 1

De acuerdo. Así que encontré una manera de hacerlo.

en el archivo css flexslider añadir esta línea

.flexslider .slides > li:first-child {display: block; -webkit-backface-visibility: visible;} 

en la línea después de esta línea:

.flexslider .slides > li {display: none; -webkit-backface-visibility: hidden;}

Eso hará que aparezca la primera imagen y esperará a que las otras imágenes se carguen antes de girar.

Answer 2

Encontré la manera más suave de hacer esto.

Agregue un div con la primera imagen del control deslizante antes de flexslider como este.

<div class="pre-flexslider-container">
<img src="slider.jpg">
</div>
<div class="main-flexslider-container" style="display: none">
<div class="flexslider">
.
.
.
</div>
</div>

Luego agregue el siguiente código para flexslider initalization:

$(window).load(function(){
$(''.flexslider'').flexslider({
.
.
.
.
.
start: function(slider){
$(''.pre-flexslider-container'').css("display","none");
$(''.main-flexslider-container'').css("display","block");
slider.resize();
}
});
});

Answer 3

Hay un par de maneras en que puedes ir.

Primero, puedes intentar agregar etiquetas de imagen ocultas como:

<img src="pictures/slide1.jpg" style="display:none">
<img src="pictures/slide2.jpg" style="display:none">
<img src="pictures/slide3.jpg" style="display:none">
<img src="pictures/slide4.jpg" style="display:none">
<ul>...your slides...</ul>

para precargar tus imágenes. Sin embargo, recomendaría este método.

Otra solución que mostrará su contenido rápidamente (pero no se ha probado con IE6) es usar el control deslizante que se encuentra en https://github.com/ozzyogkush/jquery.contentSlider . Este es un widget de control deslizante que he estado desarrollando, que funciona muy bien. Requeriría un ligero cambio en el diseño de su DOM, pero puede tener diapositivas tan complejas como necesite.

Answer 4

He solucionado rápidamente este problema agregando el estilo css en la hoja de estilo flexslider. El estilo es:

.flexslider .slides > li a img{visibility:visible !important; opacity:1 !important;filter:alpha(opacity=100) !important;}

Answer 5

Sé que este es un problema antiguo, pero tengo una solución más simple.

Encontrar

.flexslider .slides > li {display: none; -webkit-backface-visibility: hidden;}

y cambia el selector a

.flexslider .slides > li:not(:first-child)

Answer 6

smoothHeight: false //{NEW} Boolean: Allow height of the slider to animate smoothly in horizontal mode

Si configura smoothHeight como verdadero, intente en el modo predeterminado, también puede mejorar el rendimiento.