Carga lenta de la imagen Flexslider

Estoy usando Flexslider en un sitio web que estoy construyendo.Carga lenta de la imagen Flexslider

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 cargar todas las imágenes. Por lo tanto, debe esperar a que todas las imágenes del 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.

He encontrado una pregunta similar aquí Flexslider - image preloader pero no pude hacer que funcione.

Lo utilizo para desencadenar 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 control deslizante muestre la primera imagen lo más rápido posible? y luego el segundo y así sucesivamente.

EDIT: He resuelto el problema. Se presenta en la respuesta correcta a continuación. Si tiene una mejor solución, por favor comparta: D

Fuente

2012-10-03 Alfred Larsson

Ok. así que descubrí 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;}

que hará que la primera imagen aparece y se va a esperar para las otras imágenes para cargar antes de que gire.

Fuente

2012-10-04 13:03:11

Esto funcionó muy bien para mí, ¡gracias! –

Esto me da un error donde por una fracción de segundo la imagen se distorsiona y se estira, parece suceder cuando las imágenes se terminan de cargar. – Jeger

¿En qué navegador? No puedo verlo –

-1

Hay un par de maneras en que puede ir.

En primer lugar, podría intentar añadir etiquetas de imagen ocultos tales 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 sus imágenes. Sin embargo, recomendaría contra este método.

Otra solución que mostrará su contenido rápidamente (pero no se ha probado con IE6) es utilizar 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. Se requeriría un ligero cambio en el diseño de su DOM, pero puede tener las diapositivas más complejas que necesite.

Fuente

2012-10-03 21:30:28 Derek

Lo sentimos, no funcionó. Y realmente no quiero cambiar de flexslider. –

He solucionar rápidamente este problema mediante la adición de estilo CSS en hojas de estilo flexslider el estilo es:

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

Fuente

2013-05-04 06:14:25

Gracias. Esto funcionó bien para mí. – johnny

Sé que esto es una cuestión de edad, pero tengo una solución más simple.

Encuentra

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

y cambiar el selector de

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

Fuente

2013-06-02 16:32:01

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

si establece smoothHeight como verdadero intento en modo predeterminado, entonces puede mejorar el rendimiento también

Fuente

2015-12-24 09:11:33

encontré la mejor manera de hacer esto.

Agregue un div con la primera imagen del deslizador antes del contenedor flexslider de esta manera.

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

A continuación, agregue código siguiente a flexslider initalization:

Fuente

2016-01-22 16:08:31

Este realmente me ayudó, TNX. Las soluciones de Css mostraban la primera diapositiva oculta, pero ya tenía un 33% de ancho, supongo que tengo una versión anterior o nueva de flexslider. –

Carga lenta de la imagen Flexslider

Respuesta

Cuestiones relacionadas