How to catch onload event on css styles?

Question

I load css

var ss = document.createElement("link");
var url = 'http://site.ru/style.css';
ss.setAttribute("rel", "stylesheet");
ss.setAttribute("type", "text/css");
ss.setAttribute("href", url);
document.getElementsByTagName("head")[0].appendChild(ss);

I want to call function after css loading, but tag link hasn't onload event, is there a way to do it?

yes it is. the problem is that i cant do something like ss.onload=myfunc(); — Ildar
– Ildar, Commented Jul 28, 2011 at 12:12

Thomas Shields · Accepted Answer · 2011-07-28 13:20:23Z

4

You currently don't load that css stuff via Ajax, but you could do it. That way, you also have your callback when data transfer has finished. I'm using jQuery in this example to make things short and convinient.

Be aware: This only works if your javascript & your css files are located on the same domain.

$.get('http://site.ru/style.css', function( css ) {
    $('<style>', {
        html: css
    }).appendTo( document.head || document.getElementsByTagName( 'head' )[0] );
});

Simplified vanilla Javascript might look like:

var req;

try {
    req = new XMLHttpRequest();
} catch ( e ) {
    req = new ActiveXObject( 'Microsoft.XMLHTTP' ); // there are plenty more
} finally {
    req.onreadystatechange = function() {
        if( req.readyState === 4 ) {  // simplified/shortened
            var head          = document.head || document.getElementsByTagName('head')[0] || document.documentElement,
                lnk           = document.createElement('style');
                lnk.type      = 'text/css';
                lnk.textContent = lnk.text = req.responseText;

            head.insertBefore(lnk, head.firstChild);
        }
    };

    req.open('GET', 'http://site.ru/style.css', true);
    req.send(null);
}

edited Jul 28, 2011 at 13:20

Thomas Shields

8,9235 gold badges45 silver badges80 bronze badges

answered Jul 28, 2011 at 12:13

jAndy

237k57 gold badges313 silver badges363 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

acme Over a year ago

Good answer, but I suggest using a framework like jQuery or Prototype here. jQuery offers a simple "ready"-event that can be attached to css files. And the whole AJAX-processing is more straightforward.

jAndy Over a year ago

@acme: what do you mean ? The DOMContentLoaded event which .ready() internally listens for if available will fire when the DOM is ready. stylesheets and images may not be loaded already at this point, plus I guess the OP wants to insert a stylesheet dynamically beyond pageload.

jAndy Over a year ago

...and I'm really interested in why someone would anonymously downvote that answer. oh gosh ;)

Olical Over a year ago

Any idea how you could do this but keep the relative file locations for loading images etc from the stylesheet?

Collectives™ on Stack Overflow

How to catch onload event on css styles?

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related