How To Unload Image When Not 'in View' To Save Memory?

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 lo

Solution 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.

Solution 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.

Solution 3:

This is an older article but still helpful: http://www.vargatron.com/2010/08/ipad-html5-js-memory-management/

For attaching event handlers to be notified on an image element entering and leaving the viewport in order to replace its src attribute with the actual img url (in viewport) or the placeholder url (outside viewport) there are these plugins:

http://static.pixeltango.com/jQuery/Bullseye/http://imakewebthings.com/jquery-waypoints/

Replacing the src attributes value still does not guarantee that the browser will free up memory but it is a strong hint for the garbage collector. And anyway, if the image is not freed at once then it is still in cache if the user should decide to scroll back to it.