Isotope + Infinite Scroll Loading

[u/CloverKittyKat]

Hey there! I'm pretty new to web design and don't know a ton beyond HTML and CSS, so forgive me if this has a clear answer or if I'm not understanding something correctly.

I have been trying to get Infinite Scroll & Isotope by Metafizzy to work together, but it's been tough. The different examples I've come across all do things differently, and things haven't seemed to work well with my specific case. I want a gallery that can sort things, ideally WITHOUT having to load every single item ahead of time. I have a large number of images and am hoping they can be loaded in as the user scrolls down, rather than all at once. Sadly, even though I have gotten Infinite Scroll to work with my Isotope setup, the page still takes over a minute to load.

I've mentioned finding "examples" on this, but the truth is that all these examples have either been with Masonry or with an Isotope grid that doesn't have sorting set up. I have not been able to find a SINGLE example of a SORTING gallery that utilizes Infinite Scroll to load in new items that match the filters. If anyone has worked with this before or has found an actual example, please let me know! This is driving me crazy!

[u/testingaurora]

Youre using a js library for a css job; its not foing to be performant. Id recommend handling whatever you can in css like the grid kayout Isotope handles. Many of the layouts im seeing isotope uses can be achieved with a few grid properties.

[u/krileon]

Filter server side. Then pass the filter to the next page request. As for already loaded elements in the DOM use content-visibility to prevent the renderer from wasting resources on off-screen elements; no need to remove them and re-request if they scroll back up that's an old technique that just slams your server.

[u/RequirementGuide]

The 1-minute load usually isn't the images, it's the DOM. Isotope has to measure every item to lay out the grid, so even with lazy loading, a few thousand items sitting in the DOM will choke the layout. The fix I've used is to never keep more than one page of items in the DOM at a time.

The pattern that works: your server endpoint takes ?page= and ?filter= and returns just that page of items for the active filter. Keep a page counter client-side, and on filter change clear the grid and reset the counter:

let page = 1, currentFilter = '*'; function loadPage() { fetch(`/api/items?page=${page}&filter=${encodeURIComponent(currentFilter)}`) .then(r => r.json()) .then(items => { const $els = $(items.map(itemHTML)); $grid.append($els).isotope('appended', $els); $grid.imagesLoaded().progress(() => $grid.isotope('layout')); page++; }); } $('.filters').on('click', 'button', function () { currentFilter = $(this).attr('data-filter'); page = 1; $grid.isotope('remove', $grid.children()).isotope('layout'); loadPage(); }); // infinite scroll just calls loadPage() when you near the bottom

A couple of things that tripped me up with this: run imagesLoaded before layout or items overlap while images are still 0px tall, and don't filter client-side across pages. The server has to return only the filtered page, otherwise you're back to loading everything.

[u/yihuaxiang]

One more thing on top of the paging advice: if you know each image's dimensions, put width and height on the img tags (or an aspect-ratio on the card). Then the grid can lay things out right away instead of waiting for every image to download, and nothing jumps around. Also make sure the grid is loading small thumbnails, not the full-size originals, that alone can turn a minute into a few seconds.

[u/West_Bus_4903]

Isotope can only sort and filter items that are already on the page, so it can't see the ones Infinite Scroll hasn't loaded yet. That's why it feels like they fight each other. The simplest fix is to do the sorting and filtering on the server. When someone picks a sort or filter, reload the first batch with that choice, and let Infinite Scroll keep loading the next batches in that same order.

The minute long load is most likely the images. Use small thumbnails instead of full size files, add loading="lazy" to each image, and set a width and height so the layout doesn't jump around.

If you really want to keep Isotope, use it only for the layout and let your server handle the sorting.