This project is archived and is in readonly mode.

#186 ✓resolved
Stickman

Asset.css onload event does not fire in FF3, Safari, Opera

Reported by Stickman | July 2nd, 2008 @ 05:12 PM

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

    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;
    },
    
  • Aaron Newton

    Aaron Newton February 19th, 2009 @ 12:25 AM

    • Assigned user changed from “Valerio” to “Aaron Newton”
    • Tag changed from 1.2release, defect, events, plugins to defect, events
    • Milestone cleared.
  • fakedarren

    fakedarren February 8th, 2010 @ 03:18 PM

    • State changed from “new” to “open”

    We don't currently support onLoad for Asset.css. Do we plan to?

  • Aaron Newton

    Aaron Newton February 9th, 2010 @ 09:24 AM

    • State changed from “open” to “resolved”

    Sorry it took so long to get to this ticket; -more tickets really belong in the dedicated MooTools More Lighthouse: https://mootools.lighthouseapp.com/projects/24057-mootoolsmore

    fixed for 1.2.4.4

  • elado

    elado February 9th, 2010 @ 11:13 AM

    Does the fix support cross domain urls?

    If not, please consider using this:
    http://nb.io/hacks/csshttprequest

  • Aaron Newton

    Aaron Newton February 9th, 2010 @ 06:26 PM

    Assets.css is used for loading css, not cross-browser hacking in JS data.

  • elado

    elado February 9th, 2010 @ 06:37 PM

    Sure, just saying that XHR won't work for cross domain calls and this is a nice solution to have it done, and get onload event to work.

  • Aaron Newton

    Aaron Newton February 9th, 2010 @ 07:18 PM

    Cross domain XHR support is outside the scope of this plugin, but the onload event for css is not. I'm not sure how the two are connected.

  • elado

    elado February 9th, 2010 @ 07:36 PM

    When you want to load a css from a different domain and get notified when it's loaded, you can't just use XHR like in Stickman's example. And as far as I remember, there's no native cross browser onload event for .

  • elado
  • Kevin Sweeney

    Kevin Sweeney August 12th, 2010 @ 11:01 PM

    • Milestone order changed from “0” to “0”

    I downloaded 1.4.4 but it doesn't seem that the fix made it in. Could someone please verify?

Create your profile

Help contribute to this project by taking a few moments to create your personal profile. Create your profile »

Shared Ticket Bins

Tags

Pages