Okay I've found a way to load all the symbols in IE9 and below without it hanging, but it's not all at once like the other browsers. Basically, you have to throttle the addition of the markers to the map using setTimout
. This allows the IE9 and below browsers to continue working with user interaction while it proceeds to load all the remaining images. If you attempt to load too many too fast without giving the browser a rest, it will start to get choppy in its rendering and appear to be hanging.
Important note: it seems that the rendering rate keeps getting slower the more choppy it gets and especially when it hangs although I didn't verify this. Personally, I like one at a time as it shows the user it's still laoding markers.
updated fiddle that shows the improvement with throttling.
javascript that I ended up using:
I didn't render them in blocks below like I did in the fiddle as it seems to work best (for me) processing them one at a time with a short 200ms interval.
if (ie >= 7 && ie <= 9)
{
$.each(arrMarkers, function (index, marker)
{
// throttle the addition of markers to the map
setTimeout(function ()
{
marker.setMap(map);
}, index * 200);
});
}
var ie = (function ()
{
var undef,
v = 3,
div = document.createElement('div'),
all = div.getElementsByTagName('i');
while (
div.innerHTML = '<!--[if gt IE ' + (++v) + ']><i></i><![endif]-->',
all[0]
);
return v > 4 ? v : undef;
} ());