640 Вы, наверное, знаете, что асинхронная загрузка ресурсов является ключом к предотвращению нежелательных и ненужных блокировок в браузере.
Есть много доступных скриптов/библиотек, помогающих с асинхронной загрузкой, но только единицы из них и простые и компактные и надежные.
В этой статье речь пойдет о LABjs — легкой утилите Кайла Симпсона для загрузки ваших скриптов без блокировок.
Скачать LABjs
Вы можете скачать LABjs с или через GitHub.
Традиционные включения скриптов
Традиционное включение скриптов блокирует загрузку последующих ресурсов. Как выглядит стандартное включение, представлено ниже:
|
1 2 3 4 5 |
<script src="mootools-1.3.js"></script> <script src="lightface/Source/LightFace.js"></script> <script src="lightface/Source/LightFace.Request.js"></script> <script src="lightface/Source/LightFace.Static.js"></script> <script src="Color.js"></script> |
Ждать...ждать...ждать. Это пустая трата времени. Если другие части страницы не используют эти скрипты, почему же пользователям приходится ждать, прежде чем все загрузится? LABjs исправляет это.
Использование LABjs
Сначала подключаем LABjs через традиционный тэг SCRIPT:
|
1 |
<script src="LAB.js"></script> |
$LAB переменная указателя LABjs. Вы можете загружать скрипты, используя метод скрипта:
|
1 |
$LAB.script('mootools-1.3.js'); |
Метод wait позволяет приостанавливать исполнение скрипта (не загрузку) перед тем, как выполнятся последующие скрипты в цепочке:
|
1 2 3 |
$LAB .script('mootools-1.3.js').wait() .script('mootools-dependent-script.js'); |
Использование wait является хорошим путем управления зависимостями скриптов.
На пример, вы не можете использовать MooTools More перед MooTools Core, потому что MooTools Core — ядро библиотеки. Хотя вы и указали, чтобы Core грузилось раньше More, но это еще не значит, что так и будет, и чтобы не было таких ошибок, вы можете использовать wait:
|
1 2 3 |
$LAB .script('mootools-1.3.js').wait() .script('mootools-1.3-more.js'); |
Также метод wait возвращает ответ, когда скрипты полностью прогрузятся:
|
1 2 3 4 5 6 7 8 |
$LAB .script('mootools-1.3.js').wait() .script('mootools-1.3-more.js').wait(function() { // Now that the Fx.Accordion is available.... var accordion = new Fx.Accordion(/* ... */); }); |
Чтобы закончить пример, мы напишем следующий код:
|
1 2 3 4 5 6 7 8 |
$LAB .script('mootools-1.3.js').wait() .script('lightface/Source/LightFace.js').wait() .script('lightface/Source/LightFace.Request.js') .script('lightface/Source/LightFace.Static.js').wait(function() { var modal = new LightFace.Request(/* */); }) .script('Color.js') |
Вот и вся загрузка скриптов через LABjs!
Настройки LABjs
Вы также можете настраивать LABjs через метод setOptions:
|
1 |
$LAB.setOptions({ AlwaysPreserveOrder:true }); |
Вот несколько опций:
AlwaysPreserveOrder: Выполняет вызов wait () после каждого скриптаUsePreloading: Позволяет LABjs использовать другие загрузочные трюки ()BasePath: Устанавливает основной путь для всех скриптов
Также, доступно много других опции. Информация о них доступна в .
Выводы
LABjs маленькая утилита, ценность которой трудно не дооценить. Она компактна, проста в использовании и реализации(!).
