Load CSS through AJAX

Safari and Firefox don't fire load events for <links>, so we need a different way to load with onload support

by rgthree

HTML

<h1>hi!</h1>

JavaScript

function loadCss(src, callback){
    // Using XMLHttpRequest. If you need legacy IE support, you should know what to do here
    var req = new XMLHttpRequest();
    req.onreadystatechange = function(){
        if(req.readyState === 4 && req.status === 200){
            // Create Stylesheet
            var style = document.createElement('style');
            style.type = 'text/css';
            style.media = 'screen';
            if(style.styleSheet){
                style.styleSheet.cssText = req.responseText;
            }else{
                style.appendChild(document.createTextNode(req.responseText));
            }
            document.head.appendChild(style);
            callback && callback();
        }
    }
    req.open('GET', src);
    req.send();
}

// Needs to be same domain, load jsFiddle's normalize after a second
// will alert and change the default styles in preview
setTimeout(function(){ 
    loadCss('/css/normalize.css', function(){ alert('loaded!'); });
}, 1000);