Как дождаться загрузки всех скриптов js?

373

02 мая 2017, 06:58

Здравствуйте.

Есть два js файла такого типа <script defer="" src="/static/CACHE/js/070e65d4886b.js"></script>, подключение которых идёт после </footer> и перед </body>.

Внутри этих файлов куча всего, включая bootstrap.js и jquery.js.

В теле сайта, на разных страницах, иногда встречаются инлайн обработчики, которые не удаётся, по ряду причин, ужать и засунуть в один из общих файлов.

Каким образом можно дождаться загрузки больших файлов, находящихся ниже в DOM, учитывая, что я не могу наверняка знать их название заранее?

ДОПОЛНЕНИЕ

Изначально, было так:

<head>
...
    <script type="text/javascript" src="js/script1.js"></script>
    <script type="text/javascript" src="js/script2.js"></script>
    <script type="text/javascript" src="js/script3.js"></script>
</head>

затем, находящиеся внутри <body></body> инлайн скрипты окружались привычным многим $(document).ready(function(){...})

и на деве это не вызывало проблем, т.к. скорость загрузки страницы не играла особой роли.

Сейчас же $(document).ready(function(){...}) не работает, по всем понятным причинам.

Я знаю как дождаться загрузки скрипта с известным названием, но не понимаю, как сделать универсально.

Если $(document).ready(function(){...}) заменить на window.onload = function() то ошибок вроде $ is undefined не возникает, но на некоторые элементы с id листенер не успевает повесится, и скрипт не срабатывает.

Answer 1

Оберните содержимое инлайн-скриптов в некую функцию method, например. Ждите, пока jQuery будет объявлено и после этого вызывайте функцию method.

function defer(method) {
  if (window.jQuery)
      method();
  else
      setTimeout(function() { defer(method) }, 50);
}

Пример с анонимной функцией:

defer(function () {
    alert("jQuery is now loaded");
});

Answer 2

Изначально создаем переменную, отвечающую за загрузку всех скриптов и размещаем её в первом скрипте

var isScriptsLoad = false;

Далее в последнем скрипте делаем

isScrtiptsLoad = true;

Соответственно вставляем где нужно

if (isScriptsLoad) { 
    //code 
};

И еще, у каждого скрипта должны быть атрибуты defer defend. Вроде должно работать.

Создание интернет-магазина игрушек в ABCname

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Как сделать примитивный клик с помощью js

Прошу помочь написать скрипт для автоклика по определенной кнопки!

326

javascript

Зависимоть свойст компонента Vue

Добрый деньЕсть такой экземпляр

336

javascript

Userscripts - подключение в качестве библиотеки

Возможно ли подключение одного Userscript из другого в качестве библиотеки? Не по ссылке на локальный/удалённый файл через @require, а "прозрачно",...

303

jQuery

jquery: Заменить телефон вида “+79106563211” на номер “+7910…11”

Есть список телефонных номеров по 12 символов:

280