Multiple containers in lazy loading

Question

I am trying to apply a Lazy Load plugin to multiple containers. I found this similar question: Lazy Load on MULTIPLE horizontal containers .

this is my attempt: http://jsfiddle.net/BAFMC/

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

But I have the same problem as the mentioned question: Lazy load is applicable only to the last container (.p_outer_content) (which is the third in the script).

Does anyone know how to solve this or have another suggestion? thanks in advance

EDIT:

Ok, I tried to reuse the lazyload function every time one of the containers scrolls:

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

Which works, but I don't know if this is a good solution. Has anyone, however, come up with a better solution? Thanks

Answer 1

There is an error in the LazyLoad plugin. When you provide a custom container, a global variable leaks. I have added the minimal fix needed here.

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

Here's a working demo http://jsfiddle.net/BAFMC/5/

I use the github raw file directly in this example, but in your project, clone the file, reduce it, and use it locally.

Answer 2

To get multiple divs for working with lazyload, you must specify the container identifier explicitly. When you have two divs #container1 and #container2 , write:

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

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

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

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