I'm currently developing a game UI that involves a large number of image files, totaling around 30MB in size. I've been caching these images to the disk using service workers, but some of them are quite large at 3MB each. Even when they are retrieved from the disk, there is still a noticeable delay before they are displayed on the screen.
Through my research into other games, it seems like a common approach is to preload these images into memory and organize them based on logical components, such as only loading assets needed for a specific level.
My question is, how can one preload images into memory using JavaScript while keeping track of which images are still loading or have been removed from memory? It's important to note that the elements displaying these images may appear dynamically on the page and not be present initially.