Update: I think there is an even easier way to do this, depending on your application. Instead of having multiple images, if you just have one <img> or Image element (or maybe two, for example, the 'this' image and the "next" image if you need animations or transitions) and just refresh .src , .width , .height , etc., you should never get close to the 10 MB limit. If you want to make a carousel app, you'll have to use smaller placeholders first. You might find that this method might be easier to implement.
I think I actually found a workaround for this.
Basically, you will need to do more in-depth image management and explicitly compress any image you don't need. You usually do this with document.removeChild(divMyImageContainer) or $("myimagecontainer").empty() or whatever you have, but on Mobile Safari it does absolutely nothing; the browser just does not free up memory.
Instead, you need to update the image so that it takes up very little memory; and you can do this by changing the src attribute. The fastest way I know is to use the data url . So instead:
myImage.src="/path/to/image.png"
... say this instead:
myImage.src="data:image/gif;base64,AN_ENCODED_IMAGE_DATA_STRING"
The following is a test demonstrating its performance. In my tests, my large 750K image will eventually destroy the browser and stop all JS exploits. But after resetting src I was able to load image instances more than 170 times. It also explains how the code works.
var strImagePath = "http://path/to/your/gigantic/image.jpg"; var arrImages = []; var imgActiveImage = null var strNullImage = "data:image/gif;base64,R0lGODlhEAAOALMAAOazToeHh0tLS/7LZv/0jvb29t/f3//Ub//ge8WSLf/rhf/3kdbW1mxsbP//mf///yH5BAAAAAAALAAAAAAQAA4AAARe8L1Ekyky67QZ1hLnjM5UUde0ECwLJoExKcppV0aCcGCmTIHEIUEqjgaORCMxIC6e0CcguWw6aFjsVMkkIr7g77ZKPJjPZqIyd7sJAgVGoEGv2xsBxqNgYPj/gAwXEQA7"; var intTimesViewed = 1; var divCounter = document.createElement('h1'); document.body.appendChild(divCounter); var shrinkImages = function() { var imgStoredImage; for (var i = arrImages.length - 1; i >= 0; i--) { imgStoredImage = arrImages[i]; if (imgStoredImage !== imgActiveImage) { imgStoredImage.src = strNullImage; } } }; var waitAndReload = function() { this.onload = null; setTimeout(loadNextImage,2500); }; var loadNextImage = function() { var imgImage = new Image(); imgImage.onload = waitAndReload; document.body.appendChild(imgImage); imgImage.src = strImagePath + "?" + (Math.random() * 9007199254740992); imgActiveImage = imgImage; shrinkImages() arrImages.push(imgImage); divCounter.innerHTML = intTimesViewed++; }; loadNextImage() gif; base64, R0lGODlhEAAOALMAAOazToeHh0tLS / 7LZv / 0jvb29t / f3 // Ub // ge8WSLf / rhf / 3kdbW1mxsbP // mf /// yH5BAAAAAAALAAAAAAQAA4AAARe8L1Ekyky67QZ1hLnjM5UUde0ECwLJoExKcppV0aCcGCmTIHEIUEqjgaORCMxIC6e0CcguWw6aFjsVMkkIr7g77ZKPJjPZqIyd7sJAgVGoEGv2xsBxqNgYPj / gAwXEQA7"; var strImagePath = "http://path/to/your/gigantic/image.jpg"; var arrImages = []; var imgActiveImage = null var strNullImage = "data:image/gif;base64,R0lGODlhEAAOALMAAOazToeHh0tLS/7LZv/0jvb29t/f3//Ub//ge8WSLf/rhf/3kdbW1mxsbP//mf///yH5BAAAAAAALAAAAAAQAA4AAARe8L1Ekyky67QZ1hLnjM5UUde0ECwLJoExKcppV0aCcGCmTIHEIUEqjgaORCMxIC6e0CcguWw6aFjsVMkkIr7g77ZKPJjPZqIyd7sJAgVGoEGv2xsBxqNgYPj/gAwXEQA7"; var intTimesViewed = 1; var divCounter = document.createElement('h1'); document.body.appendChild(divCounter); var shrinkImages = function() { var imgStoredImage; for (var i = arrImages.length - 1; i >= 0; i--) { imgStoredImage = arrImages[i]; if (imgStoredImage !== imgActiveImage) { imgStoredImage.src = strNullImage; } } }; var waitAndReload = function() { this.onload = null; setTimeout(loadNextImage,2500); }; var loadNextImage = function() { var imgImage = new Image(); imgImage.onload = waitAndReload; document.body.appendChild(imgImage); imgImage.src = strImagePath + "?" + (Math.random() * 9007199254740992); imgActiveImage = imgImage; shrinkImages() arrImages.push(imgImage); divCounter.innerHTML = intTimesViewed++; }; loadNextImage()
This code was written to test my solution, so you will need to figure out how to apply it to your own code. The code consists of three parts, which I will explain below, but the only really important part is imgStoredImage.src = strNullImage;
loadNextImage() just loads the new image and calls shrinkImages() . It also assigns an onload , which is used to start the process of loading another image (error: I have to clear this event later, but it’s not).
waitAndReload() is only for display time to be displayed on the screen. Mobile Safari is rather slow and displays large images, so it needs time after loading the image to draw a screen.
shrinkImages() goes through all previously uploaded images (except the active one) and changes .src to the dataurl address.
I am using the file folder image for dataurl here (this was the first dataurl image I could find). I use it simply so that you can see the script work. You probably want to use a transparent gif instead, so use this string of data url instead: data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==