I have a iPad (magazine) web application which displays a set of medium sized (~500kb) images. They’re displayed one per view (1024×768), and when swiped another one is displayed.
I have three images (previous, current and next) as display:block at the same time while other images are hidden with display:none.
Everything works fine on some extent. However, when application has run for some time and larger set (20+) of images has been displayed, the application crashes, mostly on iPad 1. My assumption is this has something to do with memory consumption of device.
My question is: what are the best practices to keep the memory consumption as low as possible? Obviously setting images to display:none is not working. Should I remove the images from DOM and then re-apply them when coming into view? Or are the any other simple tricks to prevent application from crashing?
There is an approach where you have to set the source of an image to an empty string before removing the element for the DOM: http://blog.thinkingtype.com/2012/07/ios-mobile-web-application-image-memory.html
So in your case you could store the source in an data attribute of the image element when you set the display to none, and set the source again when you made image visible while setting display to block.