Nhiều thùng chứa trong Tải trọng Lười biếng

Question

Tôi đang cố gắng áp dụng Lazy Load plugin cho nhiều vùng chứa. Tôi đã tìm thấy câu hỏi tương tự: Lazy Load on MULTIPLE horizontal containers.

đây là nỗ lực của tôi: http://jsfiddle.net/BAFMC/

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

Nhưng tôi có vấn đề tương tự như các câu hỏi đề cập, đó là Lazy tải chỉ áp dụng cho container cuối cùng (.p_outer_content) (đó là một phần ba trong fiddle).

Có ai biết cách giải quyết vấn đề này hoặc có đề xuất khác không? Cảm ơn trước'

EDIT:

Ok, tôi đã cố gắng để áp dụng lại các chức năng lazyload mỗi lần một trong những container được cuộn:

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

Những công trình, nhưng tôi không biết đó có phải là cách giải quyết tốt hay không. Có ai tuy nhiên đến với một giải pháp tốt hơn? Cảm ơn '

Answer 1

Có lỗi trong plugin LazyLoad. Khi bạn cung cấp một vùng chứa tùy chỉnh, có một biến toàn cục bị rò rỉ. Tôi đã thêm sửa chữa tối thiểu cần thiết trong ngã ba này ở đây.

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

Dưới đây là một bản demo làm việc http://jsfiddle.net/BAFMC/5/

Tôi đang sử dụng tập tin thô github trực tiếp trong ví dụ đó, nhưng trong dự án của bạn, sao chép tập tin, rút ​​gọn nó và sử dụng nó tại địa phương.

Answer 2

Để nhận được nhiều div để hoạt động với tải nhẹ, bạn phải đề cập đến id vùng chứa của hình ảnh một cách rõ ràng. Khi bạn có hai divs #container1 và #container2 sau đó viết:

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

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

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

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