Блог

Главная - Вопросы по программированию - Загрузка нескольких файлов JS последовательно после загрузки страницы

Загрузка нескольких файлов JS последовательно после загрузки страницы

#javascript #jquery #html #ajax

#javascript #jquery #HTML #ajax

Вопрос:

Чтобы ускорить время загрузки страницы, я хочу загружать скрипты JS после загрузки содержимого страницы.

Я нашел эту полезную статью, в которой объясняется, как это сделать, когда у вас есть один файл JS: https://varvy.com/pagespeed/defer-loading-javascript.html

Решение выглядит следующим образом:

 <script type="text/javascript">
function downloadJSAtOnload() {
    var element = document.createElement("script");
    element.src = "yourSingleJSFile.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>

В моем случае у меня есть 4 разных файла js: jQuery, main.js и index.js которые начинаются с $(document).ready(...); и определяют функцию initMap(), и maps.googleapis.com . Поэтому я изменил код на

 function downloadJSAtOnload() {

var element = document.createElement("script");
element.src = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js";
document.body.appendChild(element);

var element = document.createElement("script");
element.src = "/resources/js/main.js";
document.body.appendChild(element);

var element = document.createElement("script");
element.src = "/resources/js/index.js";
document.body.appendChild(element);

var element = document.createElement("script");
element.src = "https://maps.googleapis.com/maps/api/js?key=***mysecetrkey**amp;callback=initMap";
document.body.appendChild(element);

Каждый раз, когда я загружаю страницу, я нахожу ошибку JS в консоли. Есть две ошибки, которые я заметил до сих пор:

Первый

Ошибка ссылки: $ не определен index.js:9:5

Я не понимаю, что здесь происходит. Похоже, index.js был включен до загрузки jquery. Но почему ошибка не выдается main.js ?

Второй

validValueError: initMap не является функцией

Мне кажется, что googleapis.com js уже загружен, но index.js отсутствует (так как я определяю там функцию initMap()).

Как я могу заставить скрипты загружаться последовательно после загрузки содержимого страницы?

Комментарии:

1. jQuery Ссылаются ли где-либо в ваших загруженных скриптах?

2. взгляните на requirejs.org

3. Может быть, порядок загруженных js изменен? так что google apis является первым, а jquery — последним.

4. @Rayon Я не думаю, что на это ссылаются (я не уверен, что это значит). Я просто запускаю файлы js $(document).ready(...) , я думал, этого достаточно

5. @Focki нет, порядок точно такой, как указано в вопросе.

Ответ №1:

Если скрипты имеют зависимости друг от друга, вам нужно убедиться, что зависимости загружаются первыми. Вы можете вложить загрузку скрипта следующим образом:

 var jqueryElement = document.createElement("script");
jqueryElement.src = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js";

var mainElement = document.createElement("script");
mainElement.src = "/resources/js/main.js";

var indexElement = document.createElement("script");
indexElement.src = "/resources/js/index.js";

var googleApiElement = document.createElement("script");
googleApiElement.src = "https://maps.googleapis.com/maps/api/js?key=***mysecetrkey**amp;callback=initMap";

// add the first script element
document.body.appendChild(jqueryElement);

jqueryElementElement.onload = function () {
  document.body.appendChild(googleApiElement);
}

googleApiElement.onload = function () {
  document.body.appendChild(mainElement);
  document.body.appendChild(indexElement)
}

Я просто угадываю ваш порядок зависимостей.