Flexslider carga lenta de imagen

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 hay que esperar a que todas las imágenes en el control deslizante se carga para hacer 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 - preloader de imágenes pero no pude hacerlo funcionar.

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

EDITAR: Resolví el problema. Se presenta en la respuesta correcta a continuación. Si tiene una solución mejor: por favor comparta: D

Author: Community, 2012-10-04
Source

6 answers

Ok. 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 la primera imagen aparezca y esperará a que las otras imágenes se carguen antes de que gire.

 54
Author: Alfred Larsson,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-05-25 18:46:59

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

Buscar 

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

Y cambia el selector a

.flexslider .slides > li:not(:first-child)
 5
Author: Liam Potter,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-06-02 16:32:01

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

.flexslider .slides > li a img{visibility:visible !important; opacity:1 !important;filter:alpha(opacity=100) !important;}
 1
Author: Gurwinder Singh,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-05-04 06:30:52

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

Agregue un div con la primera imagen de slider antes del contenedor 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 a la inicialización de flexslider: 

$(window).load(function(){
  $('.flexslider').flexslider({
    .
    .
    .
    .
    .
    start: function(slider){
        $('.pre-flexslider-container').css("display","none");
        $('.main-flexslider-container').css("display","block");
        slider.resize();
    }
  });
});
 1
Author: Uğur Taşdildiren,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-01-22 16:08:31 
smoothHeight: false //{NEW} Boolean: Allow height of the slider to animate smoothly in horizontal mode

Si configura smoothHeight como true try en el modo predeterminado, también puede mejorar el rendimiento

 0
Author: Mehmet Eren Yener,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-12-24 09:11:33

Hay un par de maneras que usted puede ir.

Primero podría intentar agregar etiquetas de imágenes 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 en contra de 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 deslizante que he estado desarrollando que funciona muy bien. Requeriría un ligero cambio en su Diseño DOM, pero puede tener diapositivas tan complejas como necesite.

 -1
Author: Derek,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-10-03 21:30:28