Custom call jQuery ready
В приложениях которые используют jQuery framework, обработчики событий практически всегда задаются так:
|
1 2 3 |
$(document).ready(<span style='color:#7f0055; font-weight:bold; '>function</span>(){ <span style='color:#3f7f59; '>// do something...</span> }); |
Т.е. все действия будут выполнятся после полной загрузки документа. Но если у нас на странице единственный компонент javascript, использование которого не требует полной загрузки страницы? В данной ситуации можно задавать обработчик как только будет загружен javascript компонент (а не весь документ). Рассмотрим на примере: у нас есть компонент “часы” – для работы которого нужен элемент div. В данном случае javascript действия можно выполнять уже после загрузки элемента div с id=”clock”, например:
|
1 2 3 |
$(<span style='color:#2a00ff; '>'#clock'</span>).ready(<span style='color:#7f0055; font-weight:bold; '>function</span>(){ <span style='color:#3f7f59; '>// init clock</span> }); |
Все предельно просто, но а если у нас много javascript компонентов?
С данной проблемой я столкнулся на работе: вся страница грузится с нормальной скоростью, а баннеры загружаются в последнюю очередь. При чем этот процесс занимает слишком много времени. Получается, что используя обработчик вида $(document).ready(function(){…}); javascript ожидает загрузки всех баннеров. И в это время страница, состоящая из ajax элементов, находится в неработоспособном состоянии. Но, к счастью, jQuery позволяет вызвать ready вручную (jQuery ready manual call):
Данный метод сообщает о том, что документ был загружен. Таким образом можно использовать стандартный обработчик $(document).ready(function(){…});
Проблема была решена следующим образом: в главный layout шаблон, делается javascript вставка перед закрывающимся тегом body:
|
1 2 3 |
<script type=<span style='color:#2a00ff; '>"text/javascript"</span>> jQuery.ready(); </script> |
