How to properly handle load events with Raphael & jQuery

[Chris Jones]

Hello everybody,

I've been digging Raphaël lately, extra thanks to Dmitry for creating
such an awesome library.

I ran into a rather nasty IE issue and wanted to share the solution so
that hopefully others will avoid the headache.

In jQuery load events are traditionally handled like this:

$(function() {
// do stuff when the DOM is ready
});

However, placing your Raphaël draw code in there will cause IE to
intermittently fail. I traced the error down to line 752:

if (!document.namespaces["rvml"]) {
document.namespaces.add("rvml","urn:schemas-microsoft-com:vml");
document.createStyleSheet().addRule("rvml\\:*", "behavior:url
(#default#VML)");
}

I'm guessing that in IE jQuery's ready callback will sometimes execute
before the document or document.namespaces object is available. But
only sometimes. Wicked, tricksy IE.

The solution is to use the jQuery load callback like so:

$(window).load(function() {
// put your Raphaël draw code here
});

The result is the same as Dmitry's example codes, except jQuerified.
Hope this helps someone else out.

Bonus: since people are all crazy about the Raphaël maps, here's the
project I was working on when I encountered the issue:

http://tilt360leaders.com/network/

Extra special thanks to Dmitry for letting me sidestep Flash.

Take care all,
Chris