Dynamically loading CSS

Question

Hey There,

I'm trying to create a page theme function for my site. I want to load the corresponding themes dynamically on the page using separate CSS files.

I'm using this code:

  fileref.setAttribute("rel", "stylesheet")
  fileref.setAttribute("type", "text/css")
  fileref.setAttribute("href", 'link.css')

  document.getElementsByTagName("head")[0].appendChild(fileref)

Which works fine, but it doesn't return any info if the CSS file has loaded or not.

Is there a way to catch when the .css is loaded? Maybe by using ajax?

Answer 1

Here is a tutorial on dynamically loading css with jQuery.

http://topsecretproject.finitestatemachine.com/2009/09/how-to-load-javascript-and-css-dynamically-with-jquery/

Answer 2

Internet Explorer will trigger an onReadyStateChange event when CSS file is loaded (or any other change in it's readyState). Other browsers do not trigger any event, so you will have to manually check if the stylesheet has been loaded, which is easily possible by checking the document.styleSheets object at a fixed interval.

Example

window.onload = function ()
{
 var filename = "link.css",sheet,i;
 var fileref = document.createElement("link");
 fileref.setAttribute("rel", "stylesheet");
 fileref.setAttribute("type", "text/css");
 fileref.setAttribute("href", filename);
 readyfunc = function () {alert("File Loaded");}
 timerfunc = function ()
 {
  for (i=0;i<document.styleSheets.length;i++)
  {
   sheet = document.styleSheets[i].href;
   if(sheet !== null && sheet.substr(sheet.length-filename.length) == filename)
    return readyfunc();
  }
  setTimeout(timerfunc,50);  
 }
 if (document.all) //Uses onreadystatechange for Internet Explorer
 {
  fileref.attachEvent('onreadystatechange',function() {
   if(fileref.readyState == 'complete' || fileref.readyState == 'loaded')
    readyfunc();
  });
 }
 else    //Checks if the stylesheet has been loaded every 50 ms for others
 { setTimeout(timerfunc,50);}

    document.getElementsByTagName("head")[0].appendChild(fileref);    
}

It's ugly, but it works in all browsers.