iPad Safari image limit workaround

I hit a mobile Safari limitation recently when building an AJAX-y site on the iPad. If you load a ton of images eventually mobile Safari cuts you off and will display a [?] instead of the image. After doing some tests it appears that this limit is around 6.5 MB. Here's a test page I made that attempts to load 20 500kb images. When opening this page on an iPad, 7 of the images don't appear, even though in Charles they are returning 200 - success. I'm assuming this is similar to the way autoplay is disabled for the video tag on iPad/iPhone. Apple probably wants to make sure users don't get overloaded with downloads when browsing on 3G.

Anyhow, 6.5 MB is a hefty load and wouldn't fare well on 3G, but for one reason or another you may want to work around this limitation. I found the easiest way to patch my code was to load the image into a canvas tag using drawImage(). The canvas tag appears to be immune to the limitation. Here's another test page using the canvas tag, all the images should load.