Asset.css onload event does not fire in FF3, Safari, Opera
Reported by Stickman | July 2nd, 2008 @ 05:12 PM | in 1.3.0
I'm trying to get an onload event to fire when a CSS asset has finished loading. The following code works in IE6:
Asset.css(
'js/mocha/css/mocha.css',
{
onload:function()
{
alert('Asset loaded');
}
}
);
However, the event is not fired in Firefox 3.0, Safari 3.1.2, or Opera 9.5.0 (all on Windows XP).
As an experiment, I tried using a modified version of the code for loading javascript assets (i.e. I modified the MooTools Asset class) and had some success getting it to work with Opera, but the changes caused problems in IE and made no difference to FF or Safari.
Comments and changes to this ticket
-
Stickman July 3rd, 2008 @ 10:34 AM
I've created an interim fix for this. It's not perfect because, since it uses XHR, it won't load CSS from a third-party domain. But it works for my purposes and I thought others might find it useful until a proper fix is implemented.
Simply replace the Assets.css function definition with this:
css: function(source, properties){ // Create a style element instead of a link element var style_node = new Element('style', $merge({ 'media': 'screen', 'type': 'text/css' }, properties)).inject(document.head); // Not sure why this is needed, but it is style_node.onload = properties.onload; delete properties.onload; // Fetch CSS using XHR var request = new Request ( { method: 'get', url: source, style_node:style_node, onSuccess:function( css_text ){ // Set the CSS // From http://yuiblog.com/blog/2007/06/... if (this.styleSheet) { this.styleSheet.cssText = css_text; } else { this.appendChild(document.createTextNode(css_text)); } this.onload(); }.bind( style_node ) } ); request.send(); return style_node; },
Please Login or create a free account to add a new comment.
You can update this ticket by sending an email to from your email client. (help)
Devign