How to unload image when not 'in view' to save memory?
javascript, jquery, jquery-plugins
Solution
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.
Problem
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?