I'm using Mika Tuupola's Lazy Load plugin http://www.appelsiini.net/projects/lazyload to delay loading images as you scroll down a long image gallery. The problem is after 10 images, I use infinite scrolling so I fetch the next 10 images, and append them via ajax. Lazy Loading no longer works on this next batch of appended images.
It's a pretty javascript-heavy image gallery, so for everything else (such as tooltips, modal overlays, etc) I've been using jQuery's delegate() to bind to ajax-inserted elements. The problem with the Lazy Load plugin is that I'm not sure what event to bind to.
So say I want to lazy load images with a class of "lazy". I would write this:
$("img.lazy").lazyload({
effect: "fadeIn"
});
and it works for the first 10 images, but stops working after inserting more via ajax. The only thing I can think of is to use delegate on a load event, like so:
$(document).delegate("img.lazy", "load", function(event) {
$(this).lazyload({
effect: "fadeIn"
});
});
but that breaks everything. Thanks!
EDIT: The jQuery I use to load more records (this is a Rails app):
$(window).scroll(function() {
var url;
url = $(".pagination .next_page").attr("href");
if (url && $(window).scrollTop() > $(document).height() - $(window).height() - 50) {
$(".pagination").html("<p>loading more images...</p>");
return $.getScript(url);
}
});
$(window).scroll();
I would use the ajaxStop
method.
$("img.lazy").lazyload({
effect: "fadeIn"
}).removeClass("lazy");
$(document).ajaxStop(function(){
$("img.lazy").lazyload({
effect: "fadeIn"
}).removeClass("lazy");
});
removeClass
prevents double initialization.