pigro Caricamento in Flexslider

Question

Sto cercando di ottenere lazy loading lavorare per Flexslider utilizzando pigro plug-in jQuery Caricamento e seguendo le istruzioni su questo sito: http://www.appelsiini.net/projects/lazyload

Sto caricando la sceneggiatura plug-in e non vedo errori su console. Ho provato senza che il contenitore o le opzioni fossero passati nella funzione lazyload e ancora niente. Passo ore su questo.

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

Qualcuno sa come ottenere lazy loading lavorare in Flexslider?

Answer 1

Così ho aggiunto alla pagina immagine reale per l'attributo data-attr sul tag di immagine e after evento fuoco avrei trovato l'immagine con active di classe e impostare l'attributo src img pari al valore dei dati-attr.

Answer 2

Sto cercando di fare la stessa cosa usando Flexslider 2 e Lazy Load Plugin for jQuery.

Sembra la proprietà container funziona solo se l'elemento è in stile con overflow:scroll;

sono stato in grado di ottenere il carico pigro per lavorare utilizzando questo codice:

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

Tuttavia, questo solo pigro carichi tutto contemporaneamente invece di come il flexslider si anima.

Sono stato anche in grado di farlo funzionare al passaggio del mouse utilizzando questo codice:

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

Tuttavia questo non funziona su dispositivi touch.

Penso che la chiave sia creare il proprio evento personalizzato e attivarlo dopo un callback flexslider come il callback after.

Answer 3

Il metodo funziona abbastanza bene per me, ma l'immagine di caricamento deve avere le stesse dimensioni del resto delle immagini. Io in realtà uso http://imageresizing.net/ con modalità = pad

Nel contenitore principale che si sta utilizzando per flexslider, mettere l'immagine reale in un "data-src" attributo

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

In te funzione di inizializzazione, utilizzare la " START" callback per sostituire l'immagine di carico con l'immagine reale, e rimuovere l'attributo

$('#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"); 
     }); 
    } 
}); 

Spero che questo aiuta qualcuno.

Answer 4

Si potrebbe anche inizializzare lazyload con un evento di trigger personalizzato ...

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

...e quindi chiamare questo evento per precaricare tutte le immagini all'interno del flexslider con una chiamata del tipo:

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

Answer 5

Per il bene di offrire una soluzione alternativa - un'altra opzione è quella di utilizzare un cursore reattivo, che ha già carico pigro integrato in esso , ad esempio il cursore reale, ecco il link ->http://dimsemenov.com/plugins/royal-slider/

Answer 6

Ho implementato un carico pigro durante lo scorrimento. Questa soluzione funziona meglio per le grandi collezioni rispetto ad altre soluzioni proposte qui. Durante l'inizializzazione carica solo le prime 5 immagini e quindi carica più avanti 3 immagini per ogni animazione.

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

e codice 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"); 
      }); 
     } 
    });