I’m creating an app that displays image files from a selected directory in a grid. It loads in the first 20 and loads in more as the user scrolls down.
When the user selects a directory I use a function that walks through the directory recursively and pushes the paths and extensions to an array. This process is incredibly fast.
Afterwards I loop through the array, creating html elements and applying the paths to them respectively.
The initial load of images is a decent speed but as I scroll down to load more images the slower it gets, using more and more memory.
I’m not sure of the best way to go about displaying so many large images. I tried using a image processing module such as Jimp but it takes too long to resize the images and output to base64. Is this just how things work, images are stored into memory? I’ve looked around for an idea but have found nothing.