QueryLoader. Красивая загрузка, но….

Недавно столкнулся с задачей по сокрытию процесса загрузки тяжеловесной страницы. На ум сразу пришел известный плагин для jQuery под названием QueryLoader. Суть его проста, пока не загрузится вся страница целиком со всеми картинками, мы будем видеть overlay с progress bar. По желанию там все отлично кастомизуется либо через css, либо прямо через код плагина. Можно добавить различные объекты на overlay и прочее.

Не буду рассказывать как работать с этим плагином, на страничке приведенной выше все это описывается хорошо. Интересней разобрать другой момент. Когда я поставил плагин на страницу, то казалось, что все хорошо…. Но не до конца. Дело было в том, что из-за особенности плагина код его инициализации надо ставить в самый низ странички, а это давало неприятный эффект задержки его активации, да так, что пользователь видит на секунду загружаемую страницу в неприглядном состоянии.

Однако, нехорошо. Выход оказался прост. Перед body я с помощью скрипта добавил div со 100% шириной и высотой и большим z-index (но не больше, чем у элементов плагина в css), цвета и прочее по вкусу. Главное не забыть проверить, а не IE6 ли сейчас у пользователя, т.к. QueryLoader не поддерживает его и если мы добавим div в таком случае пользователи IE6 ничего не увидят вовсе (привет, пользователи IE6 :)).

Вот и все. Основная идея проста. Мы сразу вешаем “занавес” (div), а убираем его в событии doneLoad (см. код плагина). Там с помощью простых jquery-манипуляций в callback функции от animate можно сделать remove() для данного div.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">