Lazy Load - refresh / update when combined with javascript filtering - lazy-loading

Question

I am now trying to implement lazyload onto my website.
I have successfully got lazy load working on pages that have a static gallery.
The main portfolio of the website has a large list of images that can be filtered using the javascript library Isotope.
The lazy load works fine when filtering is not in used, however, if the page loads and I don't scroll, but filtering is used, the items which are brought into view don't resolve. I found that occasional images worked, but most don't.
Any suggestions on how to fix this?
Presumably i need to be able to do something that will re-trigger lazy load to refresh or recheck itself?
Here is the gallery I am trying to get working, where you can see the issues I am having: http://www.imageworkshop.com/lazyload-portfolio/
Anyone able to help?

Answer 1

call this code on filtered item is clicked: $(window).trigger('scroll');

Answer 2

I found this answer from acarabott - https://stackoverflow.com/a/13919010/735369
I have implemented this and this has worked.
The only issue is that the refresh doesn't happen until a scroll action takes place.
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/