title: load scripts asynchronously
body: <p>I am using several plugins, custom widgets and some other libraries from JQuery. as a result I have several .js and .css files. I need to create a loader for my site because it takes some time to load. it will be nice if I can display the loader before importing all the:</p>
  
  <pre><code>&lt;script type="text/javascript" src="js/jquery-1.6.2.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="js/myFunctions.js"&gt;&lt;/script&gt;
  &lt;link type="text/css" href="css/main.css" rel="stylesheet" /&gt;
  ... 
  ....
   etc
  </code></pre>
  
  <p>I have found several tutorials that enable me to import a JavaScript library asynchronously. for example I can do something like:</p>
  
  <pre><code>  (function () {
          var s = document.createElement('script');
          s.type = 'text/javascript';
          s.async = true;
          s.src = 'js/jquery-ui-1.8.16.custom.min.js';
          var x = document.getElementsByTagName('script')[0];
          x.parentNode.insertBefore(s, x);
      })();
  </code></pre>
  
  <p>for some reason when I do the same thing for all my files the pages does not work. I have been trying for so long to try to find where the problem is but I just cannot find it. First I thought that it was probably because some javascript functions depended on the others. but I loaded them in the right order using the time out function when one completed I proceeded with the next and the page still behaves weird. for example I am not able to click on links etc... animations still work though..</p>
  
  <h2>Anyways</h2>
  
  <p>Here is what I have been thinking... I believe browsers have a cache that's why it takes a long time to load the page for the first time and the next time it is quick. so what I am thinking of doing is replacing my index.html page with a page that loads all this files asynchronously. when ajax is done loading all those files redirect to the page that I plan on using. when using that page it should not take long to load since the files should alredy be included on the cache of the browser. on my index page (page where .js and .css file get loaded asynchronously) I don't care of getting errors. I will just be displaying a loader and redirecting the page when done... </p>
  
  <p>Is this idea a good alternative? or should I keep trying on implementing the asynchronously methods?</p>
  
  <hr>
  
  <h2>EDIT</h2>
  
  <p>the way I load everything async is like:</p>
  
  <pre><code>importScripts();
  
  function importScripts()
  {
      //import: jquery-ui-1.8.16.custom.min.js
      getContent("js/jquery-1.6.2.min.js",function (code) {
                  var s = document.createElement('script');
                  s.type = 'text/javascript';
                  //s.async = true;
                  s.innerHTML=code;
                  var x = document.getElementsByTagName('script')[0];
                  x.parentNode.insertBefore(s, x);
                  setTimeout(insertNext1,1);
              });
  
  
      //import: jquery-ui-1.8.16.custom.min.js
      function insertNext1()
      {
          getContent("js/jquery-ui-1.8.16.custom.min.js",function (code) {
                      var s = document.createElement('script');
                      s.type = 'text/javascript';
                      s.innerHTML=code;
                      var x = document.getElementsByTagName('script')[0];
                      x.parentNode.insertBefore(s, x);
                      setTimeout(insertNext2,1);
                  });
      }
  
      //import: jquery-ui-1.8.16.custom.css
      function insertNext2()
      {
  
          getContent("css/custom-theme/jquery-ui-1.8.16.custom.css",function (code) {
                      var s = document.createElement('link');
                      s.type = 'text/css';
                      s.rel ="stylesheet";
                      s.innerHTML=code;
                      var x = document.getElementsByTagName('script')[0];
                      x.parentNode.insertBefore(s, x);
                      setTimeout(insertNext3,1);
                  });
      }
  
      //import: main.css
      function insertNext3()
      {
  
          getContent("css/main.css",function (code) {
                      var s = document.createElement('link');
                      s.type = 'text/css';
                      s.rel ="stylesheet";
                      s.innerHTML=code;
                      var x = document.getElementsByTagName('script')[0];
                      x.parentNode.insertBefore(s, x);
                      setTimeout(insertNext4,1);
                  });
      }
  
      //import: jquery.imgpreload.min.js
      function insertNext4()
      {
          getContent("js/farinspace/jquery.imgpreload.min.js",function (code) {
                      var s = document.createElement('script');
                      s.type = 'text/javascript';
                      s.innerHTML=code;
                      var x = document.getElementsByTagName('script')[0];
                      x.parentNode.insertBefore(s, x);
                      setTimeout(insertNext5,1);
                  });
      }
  
  
      //import: marquee.js
      function insertNext5()
      {
          getContent("js/marquee.js",function (code) {
                      var s = document.createElement('script');
                      s.type = 'text/javascript';
                      s.innerHTML=code;
                      var x = document.getElementsByTagName('script')[0];
                      x.parentNode.insertBefore(s, x);
                      setTimeout(insertNext6,1);
                  });
      }
  
  
      //import: marquee.css
      function insertNext6()
      {
  
          getContent("css/marquee.css",function (code) {
                      var s = document.createElement('link');
                      s.type = 'text/css';
                      s.rel ="stylesheet";
                      s.innerHTML=code;
                      var x = document.getElementsByTagName('script')[0];
                      x.parentNode.insertBefore(s, x);
                      setTimeout(insertNext,1);
                  });
      }
  
  
  
      function insertNext()
      {
          setTimeout(pageReadyMan,10);        
      }
  }
  
  
  // get the content of url and pass that content to specified function
  function getContent( url, callBackFunction )
  {
       // attempt to create the XMLHttpRequest and make the request
       try
       {
          var asyncRequest; // variable to hold XMLHttpRequest object
          asyncRequest = new XMLHttpRequest(); // create request object
  
          // register event handler
          asyncRequest.onreadystatechange = function(){
              stateChange(asyncRequest, callBackFunction);
          } 
          asyncRequest.open( 'GET', url, true ); // prepare the request
          asyncRequest.send( null ); // send the request
       } // end try
       catch ( exception )
       {
          alert( 'Request failed.' );
       } // end catch
  } // end function getContent
  
  // call function whith content when ready
  function stateChange(asyncRequest, callBackFunction)
  {
       if ( asyncRequest.readyState == 4 &amp;&amp; asyncRequest.status == 200 )
       {
             callBackFunction(asyncRequest.responseText);
       } // end if
  } // end function stateChange
  </code></pre>
  
  <p>and the weird part is that all the style's work plus all the javascript functions. the page is frozen for some reason though...</p>