Combining jQuery Isotope and Lazy Load

Question

Have started a project using jQuery Isotope. Initially integrated with Infinite scroll, but thought it was a little clunky.

Was hoping to replace Infinite Scroll with Lazy Load, and wondered if anyone has had any luck combining the two. Any tips to get them to play nice would be great.

Thanks a mill

Answer 1

If you want to use isotope's sorting/filtering functions, you will need to set the failure_limit of lazyload and trigger the event with isotope's onLayout callback.

jQuery(document).ready(function($) {
    var $win = $(window),
    $con = $('#container'),
    $imgs = $("img.lazy");

    $con.isotope({
        onLayout: function() {
            $win.trigger("scroll");
        }
    });

    $imgs.lazyload({
        failure_limit: Math.max($imgs.length - 1, 0)
    });
});

Explanation

According to the docs ( http://www.appelsiini.net/projects/lazyload )

After scrolling page Lazy Load loops though unloaded images. In loop it checks if image has become visible. By default loop is stopped when first image below the fold (not visible) is found. This is based on following assumption. Order of images on page is same as order of images in HTML code. With some layouts assumption this might be wrong.

With an isotope sorted/filtered list, the page order is certainly different from the HTML so we need to adjust our failure_limit.

As you can see we store the jQuery object so that we can use its length-1 as our failure_limit. If you're curious as to why it is length-1, it's because of the following check in lazyload's update method.

if (++counter > settings.failure_limit) {
    return false;
}

Lazy load on other events

If you are not triggering your lazyloads on scroll, you will need to swap the "scroll" trigger for whichever event you are using.

Demo

http://jsfiddle.net/arthurc/ZnEhn/