Hit a hard iPhone resource limit:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;" />
<meta name="apple-touch-fullscreen" content="YES" />
<title>iPhone image loading test</title>
<script type="text/javascript">
var n = parseInt('02123003022000310', 4),
nTiles = 0;
function drawTile() {
n++;
nTiles++;
document.getElementById('img').src = 'http://h0.ortho.tiles.virtualearth.net/tiles/h0'+n.toString(4)+'.jpeg?g=131';
document.getElementById('count').innerHTML = nTiles+'';
}
window.onload = function () {
window.setInterval(drawTile, 500);
};
</script>
</head>
<body>
<img src="#" id="img" />
<p>Total tiles: <span id="count">0</span></p>
</body>
</html>
After downloading about 210 images, the iPhone simply stops downloading new ones. This is probably due to hitting the hard 30MB same-page resource limit as as documented on A List Apart. Apple itself documents the limit at 2 megapixels. Who knew that they also didn't free such resources when no longer in use?
I don't see any easy way around this one, and the implications are huge: even if your app is scrupulous in conserving JavaScript and DOM memory resources, sooner or later the browser itself will fail you. This precludes especially any browser-based Ajax mapping application, and many long-running Ajax apps in general.
So much for Web 2.0 on the iPhone.