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/

Answer 2

I think you might have some luck using this instead : https://github.com/fasterize/lazyload

It's library independent so won't break.

Answer 3

Here's working code using both jquery isotope and lazyload together successfully (tested in Chrome)

http://jsfiddle.net/wN6tC/62/

In the browser console you will get console.log('loaded image') confirmation when an image is loaded, as you scroll down. Drag the jsfiddle html box to change the width and you will see the layout change dynamically.

I added the background red class so you can see how isotope alters the dom after it loads. Most of the problems while trying to set this up come from, IMHO, isotope's dom manipulation.

I hope this is enough to get you started. Have fun.

Update: I never tested example in other browsers, and apparently IE or FF failed to work because of the HTTPS references for the javascript resources (for some odd security reason). Replacing them was all that was needed to get it working in IE and FF as seen here:

http://jsbin.com/ajoded/ and http://jsfiddle.net/wN6tC/73/