How to unload image when not 'in view' to save memory?

Question

I've got a looong gallery of pictures that I'd like to be able to display on mobile devices without browsers crashing or causing jerky scrolling. Loads of plugins around to lazy load images but is there anything out there to unload the images when not in view to save memory?

Answer 1

This is a quote from the LinkedIn Engineering team blog post LinkedIn for iPad: 5 techniques for smooth infinite scrolling in HTML5 that is relevant to this question:

UIWebView/Mobile Safari have strict limits for images. Our stream is full of big images, so we hit the limits very quickly. One option was to use the HTML5 Canvas element to draw images without running into memory issues. However, we found drawing very big images on canvas was slow, so we had to take another approach: whenever an image was swiped sufficiently off screen, we replaced the "src" attribute of the img tag with a very small image. This ensured that the memory used for rendering large images was freed up periodically. Also, we ensured that we did not introduce the empty image src attribute bug.

Answer 2

I don't think there is any way to do this. JavaScript only holds references to DOM objects, which in turn are managed by the browser. So it is entirely up to the browsers cache engine to determine when a resource is deallocated. And these decisions are not based on whether or not a JavaScript reference to this object exists, but rather if the page for which the resource was loaded is still active. In any case, the browser does cache management automatically and you can not influence it via JavaScript, as this would mean a kind of interaction with the user's file system, which in JavaScript is only allowed in very few cases with explicit authorization due to security concerns.