Múltiples contenedores en carga lenta

Question

Estoy tratando de aplicar Lazy Load plugin a varios contenedores. Encontré esta pregunta similar: Lazy Load on MULTIPLE horizontal containers.

este es mi intento: http://jsfiddle.net/BAFMC/

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

pero tengo el mismo problema que la cuestión mencionada, que es que la carga perezosa sólo se aplica al último contenedor (.p_outer_content) (que es el tercero en el violín).

¿Alguien sabe cómo resolver esto o tiene alguna otra sugerencia? Gracias de antemano'

EDIT:

Ok, he intentado volver a aplicar la función lazyload cada vez que uno de los contenedores se desplaza:

$(".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/

que obras, pero no sé si es una buena manera de resolverlo. ¿Alguien encuentra una solución mejor? Gracias '

Answer 1

Hay un error en el complemento LazyLoad. Cuando proporciona un contenedor personalizado, hubo una fuga de variable global. He agregado la corrección mínima necesaria en este fork aquí.

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

He aquí una demostración de trabajo http://jsfiddle.net/BAFMC/5/

estoy usando el archivo RAW github directamente en ese ejemplo, pero en su proyecto, clonar el archivo, Minify y utilizarla localmente.

Answer 2

Para que varios divs funcionen con lazyload, debe mencionar explícitamente los identificadores de contenedor de las imágenes. Cuando se tienen dos divs #container1 y #container2 luego escribir:

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

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

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

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