Handling thousands of pics from a mobile device
Lately I’ve been involved into a fascinating project called PepperTweet which consist in extract and visualize streams of pics from twitter starting from some search keywords.
While working on a new visualization algorithm I discovered how easy it is to make mobile browsers crash trying to display a relative small amount of images. I’ve used an IPad 1 with IOs 5 for my tests, so with other devices the results may vary but I think the point is the same, there are two main problems while handling a lot of images from a mobile browser:
Loading rate:
If I load this simple javascript code in my IPad mobile safari just crash, this is because (imho) the device is not able to handle such a big image loading rate and goes into some form of buffer overflow.
Image quantity:
Using the same image (notice how in the previous example I’ve appended a random number after each image URL in order to force its download) I was able to hit another limit, the maximum number of images a mobile device can display simultaneously, this code which tries to print 500 images made my mobile browser freeze:
A workaround:
I’ve managed to load and show thousands of images using canvas, in the following example each image is loaded, printed on canvas and the discarded, also the number of concurrent loads is limited to avoid browser crash, this example uses 10000 images but I think higher image quantities can be easily reached:
Some refinements:
It seems that mobile Safari cannot handle canvas bigger than a certain value (try this), to handle this problem one solution could be using the ‘toDataUrl‘ method when the canvas is full of pics in order to extract a screenshot. Then this screnneshot can be added to the page before the canvas so the canvas can be cleaned and reused for the upcoming pics.
Tags: canvas, lot of images, mobile safari