Dynamically load javascript and css

by Swarts

HTML

<html>
    <head>
    </head>
    <body style='background:navy;color:white;'>
        This is a test html body.
    </body>
</html>

JavaScript

var ResourceLoader = function() {

    var isTimeout= false;
    
    function _load(js, css, timeout, success, fail) {
        for(var i=0;i<css.length;i++) {
            var n= document.createElement('link');
            n.type = 'text/css';
            n.rel = 'stylesheet';
            n.href = css[i].url;
            n.media = 'screen';
            document.createStyleSheet ? document.createStyleSheet(css[i].url) : document.getElementsByTagName("head")[0].appendChild(n);
        }
        for(var i=0;i<js.length;i++) {
            var loaded = false;
            try {
                loaded = eval(scripts[i].test);
            } catch (err) {}
            if(!loaded) {
                var s= document.createElement('script');
                s.type = 'text/javascript';
                s.src = js[i].url;
                document.getElementsByTagName("head")[0].appendChild(s);
            } 
        }
        
        setTimeout(function() {
            isTimeout= true;
        }, timeout);
        _check(js, success, fail);
    }
    
    function _check(js, success, fail) {
        if(isTimeout) {
            if(typeof fail=== 'function') fail();
            return;
        }
        var loaded = 0;
        for(var i=0;i<js.length;i++) {
            try {
                if(eval(js[i].test)) loaded++;
            } catch(err) {}
        }
        if(loaded === js.length) {
            if (typeof (success) === 'function') success();
        } else {
            setTimeout(function() {
                _check(js, success, fail);
            }, 50);
        }
    }
    
    return {
        load:function(js, css, timeout, success, fail) {
            _load(js, css, timeout, success, fail);
        }
    }
    
}();