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

Sigman

Presently the images just load as normal (as if Lazy Load didn't even exist) – Sigman

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/

Tsan

This helped but did not get me 100% of the way there. What finally nailed it for me with my isotope sorting and filtering issue was editing the lazy load script itself as recommended here: github.com/desandro/isotope/issues/244#issuecomment-11635862 – Apostle

Looks like the jsfiddle is now broken as a result of the raw github code links to the external JS libraries. Here is an updated version of the fiddle that works as expected using cdnjs instead: jsfiddle.net/Hendeca/hW6Dz/1 – Galloglass

The fiddle is now fixed and works with current isotope API jsfiddle.net/arthurc/ZnEhn – Tsan

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.

Holinshed

Thanks for the response, but the issue seems to be rather linked to isotopes ability to render the pinboard items it needs in order to work. So whilst you'd expect lazy load to be fine for isotope (because it renders all the elements, just doesn't fill them), it still seems to fail. – Sigman

Have you tried using that plugin and isotope with a small list of items, and observing the timeline in dev tools (chrome or firebug, whatever)? What should happen to matter what is that images are loaded after everything, and gradually so. I'm curious though as to how you can assess the failure of lazyload? – Holinshed

The updated fiddle works with lazy load and isotope properly jsfiddle.net/arthurc/ZnEhn – Tsan

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/

Stylet

Not working in IE9. Looks like it can also be configured like so: $container.data('isotope')... – Zipnick

I've updated the javascript references to not be loaded from HTTPS github and provided two more test urls one from jsfiddle the other for jsbin. – Stylet

Thanks for the great work. You've made it all look quite simple! Did you have to customise anything beyond the basic parameters to get it working successfully, or run into any other performance issues with animation? – Sigman

I did not have to customize anything. I used the most basic of examples supplied on each of the plugin authors' sites. I didn't see any performance issues, the lazy load makes the images load-in only on visibility which is great. In a production environment I would probably play around with the threshold option so it starts loading a tiny bit sooner though. It would be nice to use an infinite scroller along with these two. – Stylet

I had success using this method. It worked fine for me in Firefox, but having issues getting this to work in IE. #13005356 – Akin