Load order of js files

Question

I can't seem to get the preloader (Query Loader 2) to load before everything else on the page. When I refresh the page the images in the full screen slider display block down the page, then the query loader starts. Is there a way to start the preloader before everything else on the page?

I use stack overflow alot and normally find the answer to my question but with my limited knowledge of javascript this one has got me stumped. Things I've tried: Putting the call to queryloader2 right at the top of the page in the header. Putting the call to the slider scripts at the bottom of the page so they load after the preloader. Changing the z-index of the preloader to higher than the slider. jQuery.getScript() which loaded the scripts in order but the slider still displayed block down the page and then the preloader started.

I'm thinking its to do with the load order but if you have any ideas as to what I'm doing wrong here your help would be much appreciated.

I've put a link to my site as I didn't know which piece of code to put on here and so you can see the way the preloader and slider load the wrong way round http://stavriaphotography.com

Answer 1

The site is quite heavy on external scripts. Here's how loading resources in browsers work:

Images are loaded asynchronously, this means browser doesn't wait for the image to load before continuing further down the DOM , however

JavaScript is loaded synchronously and you can not load the next one before the previous is loaded.

jQuery $(document).ready() function fires only when the DOM is completly loaded.

Here's what going on, on your site:

You load jQ and queryLoader in the head and prepare to call it when DOM is ready. The scripts in the footer take time to load and are delaying the $(document).ready() function call. In the mean time you have images in your body and since they are loaded asynchronously the browser begins loading them before the queryLoader is ready to execute.

The most simple solution in your case would be to move all the external scripts to your html header , however not a very practical one.

I'd suggest reading up a bit on JavaScript and splitting up you site into multiple files for faster loading.

Some pointers: jQuery.ajax() and Handlebars.js or if you really want to go crazy dive into Backbone.js with RequireJS for asynchronous javascript loading.

Hope this helps!

Answer 2

Put Jquery Library first

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>

then add your other JS files