Dynamically loading CSS
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?
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.
精彩评论