Una piccola funzione utile per caricare un file JS o CSS in modo asincrono, utilizzando JavaScript puro senza nessuna libreria.

La funzione permette di caricare un file ed eseguire una funzione di callback al completamento:

/**
 * Carica un file js o css in modo asincrono all'interno dell'header
 * 
 * @param {String} url Url della risorsa
 * @param {String} type Tipo di risorsa: js o css
 * @param {Function} callback Funzione di callback
 * @returns {undefined}
 */
function loadAsync(url, type, callback) {
 var s;
 var r = false;
 switch (type) {
  case 'css':
   s = document.createElement('link');
   s.rel = 'stylesheet';
   s.type = 'text/css';
   s.href = url;
   break;
  case 'js':
   s = document.createElement('script');
   s.type = 'text/javascript';
   s.src = url;
   break;
 }
 s.async = true;
 if (callback && typeof callback === "function") {
  s.onload = s.onreadystatechange = function () {
   if (!r && (!this.readyState || this.readyState == 'complete')){
    r = true;
    callback();
   }
  };
 }
 document.getElementsByTagName('head')[0].appendChild(s);
}

Ed ecco un esempio per utilizzare la funzione:

//css
loadAsync('http://www.miosito.com/test.css', 'css', function(){
 alert('Script CSS caricato!');
});

//js
loadAsync('http://www.miosito.com/test.js', 'js', function(){
 alert('Script JS caricato!');
});

Per caricare più files e impostare una funzione di callback alla fine del caricamento è possibile utilizzare una versione avanzata dello script, disponibile a questo indirizzo: Caricare più files javascript o css in modo asincrono