Question

168

Dynamically loading css file using javascript with callback without jQuery

rated 0 times [ 174] [ 6] / answers: 1 / hits: 47036 / 13 Years ago, mon, april 4, 2011, 12:00:00

I am trying to load a css file dynamically using javascript and cannot use any other js library (eg jQuery).

The css file loads but I can't seem to get a callback to work for it. Below is the code I am using

var callbackFunc = function(){

    console.log('file loaded');     

};

var head = document.getElementsByTagName( head )[0];

var fileref=document.createElement(link);

    fileref.setAttribute(rel, stylesheet);

    fileref.setAttribute(type, text/css);

    fileref.setAttribute(href, url);



    fileref.onload  = callbackFunc;

    head.insertBefore( fileref, head.firstChild );

Using the following code to add a script tag to load a js file works and fires a callback:

var callbackFunc = function(){

    console.log('file loaded');     

};



var script = document.createElement(script);



script.setAttribute(src,url);

script.setAttribute(type,text/javascript);



script.onload  = callbackFunc ;



head.insertBefore( script, head.firstChild );

Am I doing something wrong here? Any other method that can help me achieve this would be much appreciated?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

elvisissacg

Add To Favorites

Follow

Total Points: 410

Total Questions: 108

Total Answers: 121

Location: Monaco

Member since Tue, Jun 16, 2020

4 Years ago

answered 13 Years ago jackie · Accepted Answer

Unfortunately there is no onload support for stylesheets in most modern browsers. There is a solution I found with a little Googling.

Cited from: http://thudjs.tumblr.com/post/637855087/stylesheet-onload-or-lack-thereof

The basics

The most basic implementation of this can be done in a measely 30 lines of — framework independent — JavaScript code:

function loadStyleSheet( path, fn, scope ) {

   var head = document.getElementsByTagName( 'head' )[0], // reference to document.head for appending/ removing link nodes

       link = document.createElement( 'link' );           // create the link node

   link.setAttribute( 'href', path );

   link.setAttribute( 'rel', 'stylesheet' );

   link.setAttribute( 'type', 'text/css' );



   var sheet, cssRules;

// get the correct properties to check for depending on the browser

   if ( 'sheet' in link ) {

      sheet = 'sheet'; cssRules = 'cssRules';

   }

   else {

      sheet = 'styleSheet'; cssRules = 'rules';

   }



   var interval_id = setInterval( function() {                     // start checking whether the style sheet has successfully loaded

          try {

             if ( link[sheet] && link[sheet][cssRules].length ) { // SUCCESS! our style sheet has loaded

                clearInterval( interval_id );                      // clear the counters

                clearTimeout( timeout_id );

                fn.call( scope || window, true, link );           // fire the callback with success == true

             }

          } catch( e ) {} finally {}

       }, 10 ),                                                   // how often to check if the stylesheet is loaded

       timeout_id = setTimeout( function() {       // start counting down till fail

          clearInterval( interval_id );             // clear the counters

          clearTimeout( timeout_id );

          head.removeChild( link );                // since the style sheet didn't load, remove the link node from the DOM

          fn.call( scope || window, false, link ); // fire the callback with success == false

       }, 15000 );                                 // how long to wait before failing



   head.appendChild( link );  // insert the link node into the DOM and start loading the style sheet



   return link; // return the link node;

}

This would allow you to load a style sheet with an onload callback function like this:

loadStyleSheet( '/path/to/my/stylesheet.css', function( success, link ) {

   if ( success ) {

      // code to execute if the style sheet was loaded successfully

   }

   else {

      // code to execute if the style sheet failed to successfully

   }

} );

Or if you want to your callback to maintain its scope/ context, you could do something kind of like this:

loadStyleSheet( '/path/to/my/stylesheet.css', this.onComplete, this );