Reduce Your jQuery Script Loading Times

Hi guys, I’ve stumbled upon a jQuery script that reduces the loading time of your JavaScript include files. It works by loading all your dot js files at the same time inside an array. I’ve tried the tests out and it does seem to load much quicker than loading your files in the standard way. See the proof below and try it for yourself!

The Standard Way

<!-- 5 singlar js includes -->
<script src="https://github.com/DmitryBaranovskiy/raphael/raw/master/raphael.js"></script>
<script src="https://github.com/jquery/jquery-ui/raw/master/jquery-1.4.4.js"></script>
<script src="https://github.com/smith/scripty2/raw/master/lib/prototype.js"></script>
<script src="https://github.com/headjs/www/raw/master/content/test/jquery-ui.js"></script>
<script src="https://github.com/kosmas58/compass-jquery-plugin/raw/master/lib/jslint.js"></script>

The head.js Way

<!-- 1 js include (which calls the others async) -->
<script src="../media/js/head.min.js"></script> 
<script>
head.js("https://github.com/DmitryBaranovskiy/raphael/raw/master/raphael.js")
	 .js("https://github.com/jquery/jquery-ui/raw/master/jquery-1.4.4.js")
	 .js("https://github.com/smith/scripty2/raw/master/lib/prototype.js")
	 .js("https://github.com/headjs/www/raw/master/content/test/jquery-ui.js")
	 .js("https://github.com/kosmas58/compass-jquery-plugin/raw/master/lib/jslint.js");
</script>

Document Ready with head.js

Usually with jQuery code you need to wait until the DOM is ready. This is the same when using head.js and this is how you can acheive the same result.

//same as document.ready() function
head.ready(function() {
     //code to be executed once .js files have loaded.
});

Demo
Download