Contenitori multipli in Lazy Load

Question

Sto tentando di applicare Lazy Load plugin a più contenitori. Ho trovato questa domanda simile: Lazy Load on MULTIPLE horizontal containers.

questo è il mio tentativo: http://jsfiddle.net/BAFMC/

$(".p_outer_content").each(function() { 
    var tthis = $(this); 
    $(this).find('img').lazyload({ 
     container: tthis 
    }); 
});​ 

Ma io ho lo stesso problema come il problema citato, che è quella pigro carico vale solo per l'ultimo contenitore (.p_outer_content) (che è il terzo in il violino).

Qualcuno sa come risolvere questo o ha altri suggerimenti? Grazie in anticipo'

EDIT:

Ok, ho provato a riapplicare la funzione lazyload ogni volta che uno dei contenitori viene fatto scorrere:

$(".p_outer_content").each(function() { 
    var tthis = $(this); 
    $(this).find('img').lazyload({ 
     container: tthis 
    }); 
}); 

$(".p_outer_content").scroll(function() { 
    var tthis = $(this); 
    $(this).find('img').lazyload({ 
     container: tthis 
    }); 

});​ 

http://jsfiddle.net/BAFMC/4/

che lavora, ma non so se sia un buon modo di risolverlo. Qualcuno, comunque, ha trovato una soluzione migliore? Grazie '

Answer 1

C'è un bug nel plugin LazyLoad. Quando si fornisce un contenitore personalizzato, si è verificata una perdita variabile globale. Ho aggiunto la correzione minima necessaria in questo fork qui.

https://raw.github.com/marchingants/jquery_lazyload/master/jquery.lazyload.js

Ecco una demo funzionante http://jsfiddle.net/BAFMC/5/

Sto usando il file raw github direttamente in quell'esempio, ma nel progetto, clonare il file Minify e usarlo a livello locale.

Answer 2

Al fine di far funzionare più div con lazyload, è necessario menzionare esplicitamente l'id contenitore delle immagini. Quando si dispone di due div #container1 e #container2 quindi scrivere:

$("#container1 img.lazy").lazyload({ container: $("#container1") });

$("#container2 img.lazy").lazyload({ container: $("#container2") });

Invece di: $("img.lazy").lazyload({ container: $("#container1") });

$("img.lazy").lazyload({ container: $("#container2") });