Загрузка порядка js-файлов

Question

Я не могу заставить preloader (Query Loader 2) загружать все остальное на странице. Когда я обновляю страницу, изображения на полноэкранном слайдере блокируются на странице, затем запускается загрузчик запросов. Есть ли способ начать предварительный загрузчик перед всем остальным на странице?

Я использую переполнение стека alot и обычно нахожу ответ на свой вопрос, но с моим ограниченным знанием javascript, это меня застопорило. Вещи, которые я пробовал: Ввод вызова queryloader2 в верхней части страницы в заголовке. Ввод вызова скриптам слайдера в нижней части страницы, чтобы они загрузились после предварительного загрузчика. Изменение z-индекса прелоадера выше, чем ползунок. jQuery.getScript(), который загружал сценарии по порядку, но слайдер все еще отображал блок вниз по странице, а затем запускался прелоадер.

Я думаю, что это нужно делать с порядком загрузки, но если у вас есть какие-то идеи относительно того, что я делаю неправильно, ваша помощь будет очень оценена.

Я поставил ссылку на мой сайт, как я не знаю, какая часть кода поставить здесь, и поэтому вы можете увидеть, как прелоадер и ползунок загрузки навыворот http://stavriaphotography.com

Answer 1

сайт довольно тяжело на внешних скриптов. Вот как загрузка ресурсов в браузерах работают:

Изображения загружаются асинхронно, это означает, что браузер не ждать, пока изображение для загрузки, прежде чем продолжить далее вниз DOM, однако

JavaScript загружается синхронно, и вы можете не загрузить следующий, прежде чем будет загружена предыдущая.

Функция jQuery $(document).ready() срабатывает только при полной загрузке DOM.

Вот что происходит на вашем сайте:

Вы загружаете JQ и queryLoader в голове и подготовить для вызова, когда DOM готова. Скрипты в нижнем колонтитуле требуют времени для загрузки и задержки вызова функции $(document).ready(). Между тем у вас есть изображения в вашем теле, и поскольку они загружаются асинхронно, браузер начинает их загружать до того, как queryLoader готов к выполнению.

Самое простое решение в вашем случае будет переместить все внешние скрипты для вашего HTML заголовка, однако, не очень практичен.

Я бы предложил немного прочитать JavaScript и разделить ваш сайт на несколько файлов для более быстрой загрузки.

Некоторые указатели: jQuery.ajax() и Handlebars.js, или если вы действительно хотите сходить с ума в Backbone.js с RequireJS для асинхронной загрузки javascript.

Надеюсь, это поможет!

Answer 2

Помещенный Jquery Библиотека первой

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

затем добавить другие JS файлы