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

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

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

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

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

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

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

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

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

Написать комментарий

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

Сообщение Cannot read property 'msie' of undefined

Апрель 13, 2017 г.

Два вероятных случая могут генерировать данное сообщение в консоли браузера. Раннее обращение к js плагину Те или иные свойства могут быть недоступны, если вы обращаетесь к методам и свойствам до того как они определены. В данном случае обращение ...

Читать

Создаём ripple эффект

Апрель 29, 2017 г.

Ripple эффект - это анимация, визуально напоминающая расходящийся круг. Иногда накладывают несколько эффектов сразу и это выглядит как расходящиеся круги ...

Читать

 

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

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



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