Multiple containers in Lazy Load

Question

I am trying to apply 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 question mentioned, which is that Lazy load only applies to the last container (.p_outer_content) (which is the third one in the fiddle).

Does anyone know how to solve this or has other suggestion? Thanks in advance'

EDIT:

Ok, I tried to reapply the lazyload function each time one of the containers is scrolled:

$(".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 it a good way of solving it. Does anyone however come up with a better solution? Thanks'

Answer 1

There is a bug in the LazyLoad plugin. When you provide a custom container, there was a global variable leak. I have added the minimum necessary fix in this fork here.

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

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

I am using the github raw file directly in that example, but in your project, clone the file, minify it and use it locally.

Answer 2

In order to get multiple divs to work with lazyload, you have to mention the container id's of the images explicitely. When you have two divs #container1 and #container2 then write:

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

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

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

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