Load StyleSheet dynamically with Callback function

Question

I have this short JavaScript function that loads CSS file dynamically. But im not yet good at JavaScript so can anyone give me an idea on how can I create a callback function once the CSS file was successfully loaded...

function loadStyleSheet(url){
    if(document.createStyleSheet) {
        try {document.createStyleSheet(url);} catch (e) { }
    }
    else{
        var css;
        css         = document.createElement('link');
        css.rel     = 'stylesheet';
        css.type    = 'text/css';
        css.media   = "all";
        css.href    = url;
        document.getElementsByTagName("head")[0].appendChild(css);
    }
}

P.S. If you have an idea on how I can also know if the loading of CSS file has failed. Well i will thank you more ^_^

the original codes came from here http://stackoverflow.com/questions/805384/how-to-apply-inline-and-or-external-css-loaded-dynamically-with-jquery — Netorica, Feb 28 '12 at 05:59
I have tested this on IE7,8,9 FF, Safari, Opera and Chrome this code is nicely working... — Netorica, Feb 28 '12 at 06:01

score 3 · Answer 1 · answered Feb 28 '12 at 06:39

3

I am not sure if there is a bullet proof way to check if the style sheet is loaded. It primarily depends on whether the CSS is loaded from same domain or another.

The trick I used to check whether a CSS has loaded is to add (or use) a known rule in CSS as follows:

Example rule: .foobar { display: none; }
Add an element in my document: <span class="foobar"></span>
Load the CSS using the method you used
Poll the document at regular intervals using window.setTimeout() and check whether span.foobar is still visible. When it is hidden it would mean the CSS has loaded

answered Feb 28 '12 at 06:39

Salman A

262,204
82
430
521

im thinking that i gonna create a hidden div that will be manipulated by the CSS file. if the hidden div was manipulated... then the CSS was loaded – Netorica Feb 28 '12 at 06:42
My point exactly. For external domain CSS, AJAX is not an option; `document.styleSheets[n].cssRules.length > 0` is also not an option. – Salman A Feb 28 '12 at 06:58
Hope this can rise to the top :) it's the only answer I see here that actually addresses the original question – Chris Bosco Apr 05 '12 at 19:44

Nick Brunt · Answer 2 · 2012-02-28T06:06:39.890

1

Pass the callback function in as an argument to your function, then call it after you have loaded your stylesheet.

For example:

function myFunc() {
  alert("Hello, World");
}

loadStyleSheet("link/to/stylesheet.css", myFunc);

function loadStyleSheet(url, callback){
    if(document.createStyleSheet) {
        try {document.createStyleSheet(url);} catch (e) { }
    }
    else{
        var css;
        css         = document.createElement('link');
        css.rel     = 'stylesheet';
        css.type    = 'text/css';
        css.media   = "all";
        css.href    = url;
        document.getElementsByTagName("head")[0].appendChild(css);
    }
    callback();
}

EDIT

If you want to test whether it has loaded the stylesheet properly, you will have to use AJAX.

edited Feb 28 '12 at 06:06

answered Feb 28 '12 at 06:00

Nick Brunt

9,533
10
54
83

1

how can i detect if the css file is successfully loaded? i know this code will work... but what if there was a timeout and the css file was not loaded – Netorica Feb 28 '12 at 06:06
You'll have to use AJAX for that. I would recommend learning jQuery as it makes this a lot easier to understand and implement. – Nick Brunt Feb 28 '12 at 06:07
Is there any link that you can give me about loading a CSS file using AJAX with callback function? – Netorica Feb 28 '12 at 06:11
1

Not off the top of my head. I'm sure you can find something like that with Google pretty easily. As I said, it'll be much easier with jQuery. – Nick Brunt Feb 28 '12 at 06:14
You can add a load handler to `css` without going to AJAX; the problem remains the IE proprietary stuff – Chris Bosco Apr 05 '12 at 19:39

score 0 · Answer 3 · answered Feb 28 '12 at 06:44

0

I think i found the answer to my problem ^_^ http://yepnopejs.com/

thank you everyone for your help ^_^

answered Feb 28 '12 at 06:44

Netorica

18,523
17
73
108

score -2 · Answer 4 · edited Nov 26 '13 at 17:10

-2

I think the simplest would be to append the markup to the head on load

$('<link rel="stylesheet" href="link.css" type="text/css" />').appendTo("head")
.each(function() { //little trick to create the callback function
    // I am the callback
});

^{P.S: Its a jQuery solution. I didn't notice JS & CSS tag, but still its a good solution}

edited Nov 26 '13 at 17:10

BenMorel

34,448
50
182
322

answered Feb 28 '12 at 06:13

Starx

77,474
47
185
261

Doesn't this also not mean "load" but instead on append to the DOM? I think the original question is referring to CSS having been loaded and parsed, not that you've created the `` element – Chris Bosco Apr 05 '12 at 19:42

Load StyleSheet dynamically with Callback function

4 Answers4