I'm fairly new to web development and have mostly worked with HTML and CSS. I'm building a large image gallery with Isotope and Infinite Scroll, and I need the items to be sortable or filterable without loading the entire collection when the page opens. Infinite Scroll appears to be working, but the initial page still takes more than a minute to load. Most examples I've found either use Masonry or don't include filtering. Has anyone implemented a sortable Isotope gallery where each filter loads additional matching items as the user scrolls?
4 Answers
Also check the assets themselves. Use generated thumbnails for the grid instead of full-size originals, and load the large image only when someone opens an item. Give each image explicit `width` and `height` values, or give the card an `aspect-ratio`, so Isotope knows the item size before the image finishes downloading. That reduces layout shifting and can make the initial load much faster.
A typical setup is to keep `page` and `currentFilter` in JavaScript, then request something like `/api/items?page=2&filter=photos`. After the response arrives, append the generated cards and call `isotope('appended', elements)`. Run the layout after the image dimensions are known, using `imagesLoaded` if necessary. Infinite Scroll only needs to call that same loading function when the scroll threshold is reached. Don’t filter the items purely on the client, because later pages could contain matches that have never been downloaded.
For very large collections, keeping only a limited number of pages in the DOM is usually more reliable than leaving thousands of cards there. CSS features such as `content-visibility` can help with off-screen content, but they don’t remove the cost of a massive DOM or eliminate the need for pagination. A CSS grid may also be enough if you don’t need Isotope’s particular layout behavior.
The main problem is probably that every item is still present in the HTML. Even if the images are lazy-loaded, Isotope still has to measure and position a huge number of elements. Have the server return one page of items at a time, along with the active filter. Load the first page initially, request the next page when the user nears the bottom, and append those items with Isotope’s `appended` method. When the filter changes, clear the current grid, reset the page counter, and request page one for the new filter. Filtering should happen on the server rather than trying to sort every page of items already loaded in the browser.
That makes sense. I was trying to make Isotope filter everything already in the page, so I’ll move the filtering and pagination to the server instead.