Image Preloading and Memory issue

Question

I have an image gallery. When I click a thumbnail image of a particular gallery it will load the actual size image ( size ~ 800KB). Also user has the option to view the previous and next images while keyboard left and right arrow keys are pressed. For better performance I created a preloading method in java script like this

function preload(src)
{
 var image = new Image();
image.src = src; 
}

When user press left/right key I will call this preload() method to Preload the next and previous images. The problem here I am facing is

Memory utilization increases on each preload method call. When I view more than 20 images firefox is shutting down. How can resolve this memory issue. How can i implement a better image preloading mechanism here. Can any one please help me.

Answer 1

Maybe you could save your images in an array, replacing them with new images after a while. Like this;

1. Fill your thumbnails array
2. When your user scrolls, replace the thumbnails not relevant in the array
3. Profit!!