Isotope Loading Slow on Page Load

[bluefuze]

Hi there,

I'm working on a site: http://bluefuze.com/mikesass/digital.html

The client wanted a particular category (selected best works) to show on page load instead of ALL. I have that working.

But it doesn't seem to matter if I have that feature on or not... when the page is loading, the images first seem to stack vertically for a while, before finally falling into their proper places.

Is there a way to fix this? Or at least show a loading indicator while it's loading, and then switch once loaded fully?

Not sure what the issues is... any ideas? Please help!

Thanks Doug

[desandro]

Whoa, this is some rad art.

Is there a way to fix this? Or at least show a loading indicator while it's loading, and then switch once loaded fully?

Yes, you can hide/reveal the container or all images after they load with imagesLoaded: http://isotope.metafizzy.co/appendix.html#imagesloaded

You're currently using $(window).ready() (i'm not sure if this works, do you mean $(window).load?). imagesLoaded allows you target a set of images, whereas $(window).load() targets all assets — including all images, objects, .js and .css files, and even iframes. Most likely, imagesLoaded will trigger sooner than $(window).load() because it is targeting a smaller set of assets.

Also, I see you're using an older version of Isotope. Have you tried updating to v2? http://isotope.metafizzy.co/

[bluefuze]

Thanks disandro

One of my big issues here, is that I'm not a JS guy, and I don't really know what I'm doing without heavy guidance :) I'm just a designer, that finds JS a bit intimidating, haha

What I did was follow some directions from here https://www.codersclan.net/blog/how-to-optimally-initialize-isotope/

Just to explain a couple things, I should probably point out that the client wanted:

1) The ability to have it NOT "Show All" images on page load... but wanted to have some of his selected best works initially show/filter on load. I am using the filter class ".best" for this, and used the following code in my main JS file:

$container.isotope({ filter: '.best' });

2) He also wanted the fancybox overlay that is used once you click an image, to cycle through just the images that have been filtered, NOT all of the images (which is what it does by default).

So I used the following to do that:

// Make Fancybox Respect Isotope Filtering $('.portfolioFilter a').click(function(){ var selector = $(this).attr('data-filter'); $('#portfolioContainer').isotope({ filter: selector }, function(){ if(selector == "*"){ $(".fancybox").attr("data-fancybox-group", "gallery"); } else{ $(selector).find(".fancybox").attr("data-fancybox-group", selector); } }); return false; });

So, I have the initial loading of .best working.

And I have the fancybox respecting the filtering for it's image cycling once in viewing mode... except for the initial .best state, once you first load the page. That won't work. But if you click on a different filter, then click "Best" again, it will work.

With the advice of https://www.codersclan.net/blog/how-to-optimally-initialize-isotope/ I feel that the gallery seems to be loading a bit better, and doesn't stack vertically for as long as it did before. I implemented this AFTER I submitted this posts. Maybe it's worse the way I'm doing it? But yet, the performance seems better for what I was trying to fix. Better, but not perfect. I still feel like the initial load could be better. It still glitches a bit, and sometimes briefly stacks the images vertically.

Basically, just trying to fumble through this. I really don't know what else I can do. It might be nice to just have a little rotating "loading" indicator, waiting until everything is perfectly ready to display. Or some other solution I may not know about.

I appreciate any help than can be offered.

Thank you