延迟Javascript解析给出错误

Question

I purchased a theme. Modified it. However , it was loading slow. I compressed the images, and used gzip. I read somewhere that deferring JS parsing may help even further. So, I deferred them using the following script added just below the body tag. Now, the page wont even load.

<script type="text/javascript" charset="utf-8">
function downloadJSAtOnload() {
var element = document.createElement("script");
element.src = "js/filename.js";
document.body.appendChild(element);
}
if (window.addEventListener)
window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
</script>

List of scripts I use:

<script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&language=en"></script>
    <script type="text/javascript" src="js/jquery.cookie.js"></script>
    <script type="text/javascript" src="js/styleswitch.js"></script>
    <script type="text/javascript" src="js/jquery.nav.js"></script>
    <script type="text/javascript" src="js/jquery.sticky.js"></script>
    <script type="text/javascript" src="js/jquery.parallax-1.1.3.js"></script>
    <script type="text/javascript" src="js/jquery.lavalamp-1.4.js"></script>
    <script type="text/javascript" src="js/jquery.scrollTo.js"></script>

    <script type="text/javascript" src="js/rs-plugin/js/jquery.themepunch.plugins.min.js"></script>
    <script type="text/javascript" src="js/rs-plugin/js/jquery.themepunch.revolution.min.js"></script>
    <script type="text/javascript" src="js/jquery.carouFredSel-6.1.0-packed.js"></script> 
    <script type="text/javascript" src="js/jquery.bxslider.min.js"></script>
    <script type="text/javascript" src="js/jquery.colorbox.js"></script>    
    <script type="text/javascript" src="js/jquery.isotope.min.js"></script>
    <script type="text/javascript" src="js/fancybox/jquery.fancybox.pack.js"></script>
    <script type="text/javascript" src="js/jquery.gmap.js"></script>
    <script type="text/javascript" src="js/flex-slider.min.js"></script>
    <script type="text/javascript" src="js/jquery.placeholder.js"></script>
    <script type="text/javascript" src="js/jquery.validate.min.js"></script>
    <script type="text/javascript" src="js/jquery.tweet.js"></script>

    <script type="text/javascript" src="js/main.js" charset="utf-8"></script>

Answer 1

You probably meant something like this:

function downloadJSAtOnload( script) {
  var element = document.createElement("script");
  element.src = script;
  document.body.appendChild(element);
}

function downloadAllScripts () {
  downloadJSAtOnload( 'js/jquery.js');
  downloadJSAtOnload( 'js/bootstrap.min.js');
  //etc
}

if (window.addEventListener)
  window.addEventListener("load", downloadAllScripts, false);
else if (window.attachEvent)
  window.attachEvent("onload", downloadAllScripts);
else window.onload = downloadAllScripts;