Posts

Showing posts with the label Lazy Loading

Combining JQuery Isotope And Lazy Load

Answer : 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 p...