0

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?

hackartist
  • 4,968
  • 4
  • 29
  • 47

1 Answers1

1

hackartist,

You are absolutely correct that having dynamic loading of your images based on your scrolling would be the best solution to this problem. However, why reinvent the wheel? What you're referring to is called lazy loading. Both the jQuery and Echo.js libraries have popular solutions to this problem.

Since both of the above are open sourced: you can reference their implementation for your own, contribute to make their's better, or simply use their pre-existing tools!

Also, just for your reference, here is a great post titled, "What is JavaScript garbage collection?" on Stack Overflow which can explain how garbage collection is implemented for JS. Here is also a reference on Mozilla developer network titled, "Memory Management," which explains how to release your allocated memory when it is not needed anymore.

Please let me know if you have any questions!

Community
  • 1
  • 1
Devarsh Desai
  • 5,494
  • 3
  • 16
  • 21