View Full Version : MobileSafari crash after loading large amounts of images.

16 Sep 2010, 5:51 AM
I'm having the same problem as many developers out there programming for MobileSafari, not just the ones using Sencha Touch.

Im creating a carousel with 56 x 400kb images. Im currently have only 7 images loaded at the time, using a infinit carousel pattern. The problem is that safari crashes or stops loading images after having a 'javascript cache' of 6-7 mb.

Anyone gotten around this problem?

* I've tried to put a 1x1px image on every img-tag before removing them from DOM to trigger any internal cleanup in the browser.
* I've tried to replace the img-tags with canvas-tags, only using one img to load the images before drawing them. This had some performance issues.

Any suggestions are welcome :)

16 Sep 2010, 2:02 PM
I think 400kb is quite big for mobile. Do you know Photoshop, "Save for Web and Devices"?

16 Sep 2010, 2:18 PM
Way Too Much data im thinking.
Scale them down. are they .png at least?

I noticed the same thing with my iPhone native apps using a UIwebView, even with removing the images from the DOM structure the browser view would crash after ~5mb.
I ended up having to use UIimageViews inside a ScrollView and destroy them accordingly. but that has nothing todo with Sencha or JavaScript so I'll stop typing now...

16 Sep 2010, 9:24 PM
Well, yea 400 kb is large for a mobile device but to have readability of text, say a newspaper page they end up pretty much that way.

The performance isnt really an issue, they "expect" it to run a lil slow. And with the preload and 2nd level caching it runs really smooth even over 3g.

The problem is still that it keeps crashing, so even if Im taking the images down to 100, it would crash rather quick if they start browsing the images.

20 Sep 2010, 1:56 PM
Did anyone find a solution for this? Do you think if i use cache manifest, it will have the same limit?

20 Sep 2010, 2:06 PM
Yea, i think you might have the same problem with manifests. Its a known bug with Safari Mobile not releasing its memory until you reload the page.

You can always have the images in the manifest and try to draw them as canvases. That may be a workaround, the problem lays in the image tag. Use only one to load the images and then draw em as canvases.

21 Sep 2010, 6:15 AM
Thank you for your reply. Do you think you could post some code examples on how to do it.

21 Sep 2010, 6:23 AM
Well, I havent really gotten around the problem myself yet.

But im basing my work on something like this ... iPad Safari image limit workaround (http://roblaplaca.com/blog/2010/05/05/ipad-safari-image-limit-workaround/)

21 Sep 2010, 1:20 PM
Just ran a couple of tests, and it seems to work. As long as you keep changing the image src, it doesnt crash. I had around 13MB of images there.
Here is the code:
function setImage(i) {
if(i<images.length) {
document.getElementById("myimage").src = images[i];

Regarding Cache Manifest, it seems that there is around 5MB limit, so storing large images offline would not work.

22 Apr 2011, 6:36 AM
I just stumbled upon this on Google and I was wondering if anyone could explain the solution to me.

Constantly change the image's source to what? What does the array images[] contain?

I am building a web app with multiple projects, each with their own image gallery. If the user navigates from one project to another the content is changed via jquery and .html() so the Page won't have to reload. Sadly after the third or fourth gallery is viewed the browser crashes due to too many images.

How would this solution look in my case? When do I have to constantly change the source and to what? Do I have to change the source of the images I want to delete from the cache?

Please help me I've been trying to get rid of this problem for days now. Thank you in advance

22 Apr 2011, 2:02 PM
There's plenty of info in the forums about this by now.
You can search for "infinite carousel" on this forum.

A lot of info in here too:

There are several ways to do it, for me, replacing the img node's src to a blank base64 encoded gif before a card was destroyed, did the trick.
<img src="yourbigphoto.jpg"> gets replaced to <img src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==">

And i used mitchellsimoens's Infinite Carousel by the way.

25 Apr 2011, 5:14 AM
It looks like Apple has fixed this problem with the latest release of iOS. My iPad is crashing a lot less then before. Can anyone confirm this? Also, is there any need now for these tricks with images etc?

25 Apr 2011, 5:50 AM
Have you looked into TinySrc? I use it for all my Touch apps and it works fantastic for scaling large images on the fly...plus caches them on their server for subsequent requests. I typically see anywhere between 60-80% reduction in image sizes and about the same for load times. Pretty easy to test for yourself and see what the the browser is loading when using it and when not. And the implementation could not be easier...simply append the TinySrc prefix URL onto your image references in the carousel.

Oh, and it's a Sencha Labs project :) TinySrc (http://tinysrc.net/)

26 Apr 2011, 12:03 PM
I ended up adding the image as a background image on a div and haven't had it crash yet. I'm sure there is some limit for this one too but it's worked for way past the 6-8mb's it normally crashed and burned on. I saw another technique similar to the blank image technique referenced above at :


but I pulled the framework tookit down and ran the test with 100 images and it eventually stopped showing the images after about 60 images.

27 Apr 2011, 6:50 PM
Thanks for that link Bucs, didn't know about that. :)