Asynchronous Loading of Css and Javascript

Sometime back was pawing at async forEach in JavaScript that helped me to make a simple inject function that would help in loading CSS and JavaScript files to the HTML asynchronously!

Here is the code to load CSS and JavaScript Asynchronously :

function asyncInject(array, fn, delay){ var i = 0; window.setTimeout(function iter(){

if(i===array.length){
  return;
}
fn.call(array, array[i], i++);
window.setTimeout(iter, delay);

}, 0); }

require = function(paths, callback) {

// Check if the path param is of the required type.
if (!paths instanceof Array || !paths instanceof String){
    console.log('Please check the useage');
    return;
}

// If paths param is a single param, convert it to an Array. 
paths = typeof paths === 'string' ? paths.split() : paths 
var js,css;

// For every path in paths add the required to the head.

asyncInject(paths, function(path){

    var type = path.split('.').pop();
    switch(type) {
       case 'js':
           js = document.createElement('script');
           js.src = path;
           type = js;
           break;
       case 'css':
           css = document.createElement('link');
           css.href= path;
           css.rel='stylesheet';
           type = css;
           break;
       default:
           return;
    }

    if (callback)
        type.addEventListener('load', function (e) { callback(e); }, false);

    document.head.appendChild(type);
}, 0);

}

Usage:

require(‘jq.js’);

require(‘jq.css’);

require([‘wiki.js’,‘wiki.css’]);