Displaying hundreds of big images from computer using up ram


#1

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.


#2

If you do nothing but load more and more images and never release them, then yes, your memory use is only going to increase. What most image viewers do is they have a custom view that loads the images that are viewed and some additional ones before and after in a sliding window scheme, releasing everything else. You can see a similar idea in this Atom blog post.


#3

Thanks for the response leedohm.

Rendering in objects grouped in tiles seems like a good approach. Although I’m not really sure how scrolling up, rather than down, would work since tiles out of view would be removed. I’m sure if I looked into it more I’d find a way.

I appreciate you taking the time to respond to my post!