Асинхронная загрузка и инициализация js скрипта

С тех пор как стало возможным указать загружаемому в HTML документе скрипту флаги-аттрибуты async и defer, стало необходимо понимать то, в какой очередности скрипты будут исполнены, если они зависят друг от друга.

Так если ваш скрипт зависит от jQuery-плагина, а тот в свою очередь от самой библиотеки jQuery, и все они загружаются асинхронно, то гарантировать определенную очередность запуска не возможно.

Необходим механизм запуска одного скрипта, после готовности другого. Я использую следующую snippet-функцию (к сожалению утерял первоисточник откуда взят код), которая реализует данный механизм:

Данная функция позволяет привязать вашу callback функцию к событию готовности скрипта onload.

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

В примере выше я привязываю последовательный вызов событий leafletIsLoaded и leafletIsCompletelyReady к загрузке библиотеки leaflet.js. Оба события кастомные и могут быть вызваны только принудительно через механизм trigger.

Их я объявляю в произвольном месте как inline код:

Необходимость в цепочки событий может быть обусловлена тем, что вы, к примеру, расширяете функционал (прототип) библиотеки своими методами, а только затем уже можете переходить к использованию библиотеки. Тогда для события leafletIsLoaded вы добавите зацепку вида:

Мало букафф? Читайте есчо !

jQuery плагин для ввода диапазона значений

Февраль 22, 2017 г.

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

Читать

Переменные окружения React для dev и prod

Сентябрь 15, 2023 г.

Если вы разрабатываете SPA на Reactjs, используя npx create-react-app my-app команду для создания проекта, то в коробке вы получаете множество полезных ...

Читать

Определить город по IP адресу

Май 4, 2017 г.

Писал ранее об API ipinfo.io. Сервис позволяет вытащить как гео координаты, так и названия города, региона, страны. Единственный недостаток - информация на английском языке. В данной статье рассмотрим пару примеров использования сервиса. Обращение ...

Читать

Инициализация карты google после изменения размеров контейнера карты

Февраль 2, 2018 г.

Столкнулся с данной проблемой в своей работе. Опишу более подробно. Объект Гугл карты, при изменении размеров контейнера, в котором рендерится карта, не актуализирует внутренние размеры поля, от которых зависит центровка. К примеру, при уменьшении ...

Читать
 

Комментарии к «Асинхронная загрузка и инициализация js скрипта»

Понравилась статья? Есть вопросы? - пишите в комментариях.



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