Menu
Hi,
I’m creating a Google Maps-style large image viewer in Javascript. It currently works in all browsers except for Safari, in which many of the image tiles don’t load. The code I’m using to fetch each image is as follows:
[CODE]/**
* Creates an <img> element, sets its src according to the arguments given
* and sets its absolute position.
*/
function getTile(tileY,tileX)
{
if (tileX >= 0 && tileX < iwt && tileY >=0 && tileY < iht) // Sanity check
{
var tileId = ‘x’ + tileX + ‘y’ + tileY;
var tile = document.createElement(‘img’);
tile.setAttribute(‘id’,tileId);
…
tile.style.top = (tileY * th) + ‘px’; // ‘th’ is the tile height
tile.style.left = (tileX * tw) + ‘px’; // ‘tw’ is the tile width
var tileSrc = [the appropriate, correct, location of the image tile];
tile.src = tileSrc;
var tileFrame = document.getElementById(’tileframe’);
tileFrame.appendChild(tile);
}
}
This is then called from a for() loop to populate the tile frame. In Safari, however, random tiles do not appear. When the loading is slowed down using a setTimeout(), it’s every second tile that fails to load, in a regular pattern. When I ctrl-click on the blue question mark where the missing images should be and open them in a new window, they usually load fine, or sometimes a ‘connection reset by peer’ error message is displayed, or sometimes Safari tries to save a file with the image data and its HTTP headers… weird.
I’ve checked the packets going back and forth using Ethereal and they appear to be being sent and received OK, so I’m guessing it’s probably a bug in Safari.
Does anyone know how to get around this? I’d be very grateful for any hints.