Lazy Load - refresh / update when combined with javascript filtering

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?

Can you replicate your issue on a page and link it? And from what I am taking from this is that when filtering, lazy loading works fine when you trigger it by scrolling the page. But the initial pictures that are displayed on the top of the page do not load. Am I correct? — Zack, Nov 08 '12 at 12:49
Hi Zack - the link is above: http://www.imageworkshop.com/lazyload-portfolio/. lazy loading works fine when the page first loads but if you click around on the filter options to view a 'restricted' list, some of the images do not resolve — Gearu, Nov 08 '12 at 19:51

score 3 · Answer 1 · answered Jan 03 '13 at 00:46

3

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

answered Jan 03 '13 at 00:46

Nuri Akman

792
3
18
41

can you clarify where in my code I should put this statement? – Gearu Jan 03 '13 at 04:21
I think that this post has some good answers, but still trying to figure out how to get it to work for me. [link](http://stackoverflow.com/a/13919010/735369) – Gearu Jan 08 '13 at 07:55
On my project some images on "hidden div" is not load when I show that div. Becouse lazy load is not call. By default, lazy load is attached on page scrooling. So, I added this code after this line: $('#MyHiddenDiv').show(); – Nuri Akman Jan 12 '13 at 14:56
By the way, I see no problem on your site. – Nuri Akman Jan 12 '13 at 14:57
I have used the solution below to get this going. only issue I still have is that after filtering the images now don't load until I scroll. Need to try to trigger the initial refresh to occur after the filtering. – Gearu Jan 13 '13 at 23:32

score 0 · Answer 2 · edited May 23 '17 at 10:24

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/

Lazy Load - refresh / update when combined with javascript filtering

2 Answers2