jquery - Carga perezosa en Flexslider

jquery-plugins lazy-loading

Question

Estoy tratando de hacer que la carga perezosa funcione para Flexslider mediante el uso de Lazy Loading jquery plugin y siguiendo las instrucciones de este sitio: http://www.appelsiini.net/projects/lazyload

Estoy cargando el script del complemento y no veo ningún error en la consola. Lo intenté sin que el contenedor o las opciones pasaran en la función de carga lenta y todavía nada. Me paso horas en esto.

$("img.lazy").lazyload({
  effect: "fadeIn",
  container: $(".slides > li")
});

¿Alguien sabe cómo hacer que la carga perezosa funcione en Flexslider?

Answer 1

Así que agregué la página de la imagen real al atributo data-attr en la etiqueta de la imagen y, after incendio del evento, encontraría la imagen con clase active y establecería el atributo img src igual al valor de data-attr.

Answer 2

El método funciona bastante bien para mí, pero la imagen de carga debe tener el mismo tamaño que el resto de las imágenes. En realidad uso http://imageresizing.net/ con mode = pad

En el contenedor principal que está utilizando para flexslider, coloque la imagen real en un atributo "data-src"

<li>
  <img class="lazy" src="loading-image.jpg" data-src="actual-image.jpg" />
</li>            

En su función de inicialización, use la devolución de llamada "inicio" para reemplazar la imagen de carga con la imagen real y elimine el atributo

$(''#slider'').flexslider({
    start: function (slider) {
       // lazy load
       $(slider).find("img.lazy").each(function () {
          var src = $(this).attr("data-src");
          $(this).attr("src", src).removeAttr("data-src");
       });
     }
});

Espero que esto ayude a alguien.

Answer 3

Estoy intentando hacer lo mismo con Flexslider 2 y el complemento de carga lenta para jQuery .

Parece que la propiedad del container solo funciona si el elemento tiene un estilo de overflow:scroll;

Pude hacer que la carga perezosa funcione con este código:

$("#flexcontainer img.lazy").lazyload({
    failure_limit : 10,
    effect: "fadeIn",
    skip_invisible : false
});

Sin embargo, esto solo carga la pereza de una vez en lugar de como anima el flexslider.

También pude hacer que funcione con el mouse sobre este código:

 $("#flexcontainer img.lazy").lazyload({
     failure_limit : 10,
     effect: "fadeIn",
     event : "mouseover"
 });

Sin embargo, esto no funciona en dispositivos táctiles.

Creo que la clave es crear su propio evento personalizado y activarlo después de una devolución de llamada flexslider, como la devolución de llamada after .

Answer 4

Por el bien de ofrecer una solución alternativa, otra opción es usar un control deslizante sensible que ya tenga carga lenta incorporada, por ejemplo, control deslizante real, aquí está el enlace -> http://dimsemenov.com/plugins/royal-slider/

Answer 5

También puede iniciar la carga lenta con un evento de activación personalizado ...

$jQ("img[data-original]").lazyload({
            effect: "fadeIn",
            skip_invisible: false,
            event: "forceLazyLoad"
        });

... y luego llame a este evento para precargar todas sus imágenes dentro del flexslider con una llamada como:

$jQ(''.flex-viewport'').find(''img[data-original]'').trigger(''forceLazyLoad'');

Answer 6

Implementé una carga perezosa durante el desplazamiento. Esta solución funciona mejor para grandes colecciones en comparación con otras soluciones propuestas aquí. Durante la inicialización, solo carga las primeras 5 imágenes y luego carga 3 imágenes por delante para cada animación.

<li>
  <img class="lazy" src="loading-image.jpg" data-src="actual-image.jpg" />
</li> 

y código javascript:

    $(''.flexslider'').flexslider({
        animation: "slide",
        animationLoop: false,
        controlNav: false,
        init: function (slider) {
            // lazy load
            $("img.lazy").slice(0,5).each(function () {
                var src = $(this).attr("data-src");
                $(this).attr("src", src).removeAttr("data-src").removeClass("lazy");
            });
        },
        before: function (slider) {
            // lazy load
            $("img.lazy").slice(0,3).each(function () {
                var src = $(this).attr("data-src");
                $(this).attr("src", src).removeAttr("data-src").removeClass("lazy");
            });
        }
    });