Solution for Opera's deviant implementation for DOMContentLoaded

Solution for Opera's deviant implementation for DOMContentLoaded


Hello all,
I've been using jQuery(document).ready() as my workhorse event handler
to enable unobtrusive GUI improvement, but have been stumped recently
by testing things in Opera.
While Gecko- and WebKit-based browser wait for stylesheets to be
loaded before firing DOMContentLoaded events, Opera fires the event as
soon as the HTML is parsed. The result is not only errors while
reading CSS properties (since stylesheets might be loaded when the
event fires or not, depending on the speed of individual requests),
but also crapped up styles (I guess stylesheet loading gets bogged
down when you try to manipulate the DOM). Opening up the dev console
in Opera in enabling and disabling ANY stylesheet fixes the problem.
The problem here is that rendering in this case in inconsistent and
dependant on the order in which the requests load - sometimes the page
loads up the way it's supposed to (eg. scripts last, which effectively
removes the problem), sometimes the scripts get loaded before the
stylesheets and events are fired even though the document is unstyled
- leaving Opera in a weird semi-state of applied stylesheets.
I've seen that since Opera doesn't wait for external files to load
before rendering, there's no way around flashin content before
applying styles, even when using only stylesheets. So my fix to the
problem is using a conditional statement when trying to do `ready`-
type events:
<code>
var myDomLoadedContentHandler = function() {...}
if(jQuery.browser.opera) jQuery(document).load(function()
{ myDomLoadedContentHandler(); }
else jQuery(document).ready(function()
{ myDomLoadedContentHandler(); }
</code>
Has anyone ever had a similar experience and a better solution than
the above (eg. detecting CSS loads, etc.)?