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 wi

Answer 1

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/