Lazy Loading en Flexslider

Question

que estoy tratando de conseguir la carga diferida de trabajo para Flexslider mediante el uso de plug-in Lazy Loading jQuery y siguiendo las instrucciones que aparecen en este sitio: http://www.appelsiini.net/projects/lazyload

Estoy cargando el guión plugin y no veo ningún error en consola. Intenté sin el contenedor o las opciones que se pasan 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 cargar la pereza trabajando en Flexslider?

Answer 1

por lo que añade la página real de imagen para el atributo atributo_inicio datos sobre la etiqueta de la imagen y en caso de incendio after que iba a encontrar la imagen con active clase y establecer el atributo src img igual al valor atributo_inicio datos.

Answer 2

Estoy tratando de hacer lo mismo usando Flexslider 2 y Lazy Load Plugin for jQuery.

Parece la propiedad container sólo funciona si el elemento es de estilo con overflow:scroll;

yo era capaz de conseguir la carga perezosa para trabajar con este código:

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

Sin embargo, esto sólo pereza cargas todo de una vez en vez de como lo hace el flexslider.

que también fue capaz de conseguir que funcione el ratón sobre el uso de 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 hacer que se active después de una devolución de llamada flexslider como la devolución de llamada after.

Answer 3

El método funciona bastante bien para mí, pero la imagen de carga no tiene que ser del mismo tamaño que el resto de las imágenes. En realidad yo uso http://imageresizing.net/ con el modo = almohadilla

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

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

En ti función de inicialización, utilice el " iniciar "devolución de llamada para reemplazar la imagen de carga con la imagen real, y eliminar 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 4

Es lo mismo que inicializar lazyload con un evento de disparo a medida ...

$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 5

En aras de ofrecer una solución alternativa - otra opción es utilizar un control deslizante sensible que ya ha carga perezosa construido en él , por ejemplo royal slider, aquí está el enlace ->http://dimsemenov.com/plugins/royal-slider/

Answer 6

Implementé una carga lenta durante el desplazamiento. Esta solución funciona mejor para grandes colecciones en comparación con otras soluciones propuestas aquí. Durante la inicialización, carga solo las primeras 5 imágenes y luego carga 3 imágenes por 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"); 
      }); 
     } 
    });