I have a web page on which I want to show several tens of thousands of images using html and javascript. Only about 24-30 images every will be visible at a time in a table (of 6 per row) so I thought that I was being clever to write my own javascript scrolling such that, when scrolling down for example, rows 2-3 from the bottom of the screen are constructed and the images loaded dynamically as they are near and rows 2-3 above the top of the visible area are deleted (using javascript's remove child on the whole table row). However, this didn't have the effect on saving RAM that I was hoping for and after a few hundred rows have been seen, the browser often crashes due to low memory.
I have searched for ways to tell the browser that it can release those objects but with no success. I understand that in some modern implementations you can ask the browser to run garbage collection but that this in't in all browsers or fully supported yet. One hack I can imagine is after several tens of rows, programatically reload the page while saving state somehow (cookies, local storage, or in the url) but I would heavily prefer to have it be one continuous page and simply release the memory held by the no longer used images. What is the proper way to do this?