Mehrere Container in Lazy Load

Question

Ich versuche Lazy Load plugin auf mehrere Container anzuwenden. Ich habe diese ähnliche Frage gefunden: Lazy Load on MULTIPLE horizontal containers.

das ist mein Versuch: http://jsfiddle.net/BAFMC/

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

Aber ich habe das gleiche Problem wie die Frage erwähnt, nämlich dass faule Last gilt nur für den letzten Behälter (.p_outer_content) (das der dritte ist in die Geige).

Weiß jemand, wie man das löst oder einen anderen Vorschlag hat? Vielen Dank im Voraus‘

EDIT:

Ok, ich versuchte, die lazyload Funktion jedes Mal, wenn einer der Behälter erneut anwenden gescrollt:

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

Welche funktioniert, aber ich weiß nicht, ob es ein guter Weg ist, es zu lösen. Hat jemand jedoch eine bessere Lösung? Danke '

Answer 1

Es gibt einen Fehler im LazyLoad Plugin. Wenn Sie einen benutzerdefinierten Container bereitstellen, trat ein globaler Variablenleck auf. Ich habe die minimale notwendige Reparatur in dieser Gabel hier hinzugefügt.

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

Hier ist eine Arbeits Demo http://jsfiddle.net/BAFMC/5/

ich die Github RAW-Datei direkt in diesem Beispiel verwenden, aber in Ihrem Projekt, klonen Sie die Datei, minify es und es lokal verwenden.

Answer 2

Um mehrere divs mit lazyload arbeiten zu können, müssen Sie die Container-IDs der Bilder explizit angeben. Wenn Sie zwei divs #container1 und #container2 dann schreiben:

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

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

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

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