Прекрасно, если у вас хорошая скорость соединения!
Представляете сколько посетителей имеют интернет-соединение с низкой скоростью?
При таком соединении вэб-страница с флэш-роликом может загружаться несколько минут. При этом посетитель может и не догадываться о том, что происходит на его мониторе. Ведь он итак уже длительное время наблюдает за пустой страницей.
Будет ли она загружена и появится на ней что-нибудь?
Нетерпеливый посетитель просто закроет такую страницу. Но даже у терпеливого не будет уверенности, что она ему что-то откроет.
Прелоадер (preloader) – предзагрузчик как раз предназначен информировать посетителя о процессе загрузки основного проекта и занимает его внимание на это время.
Прелоадером может стать любая лёгкая анимация или графическое изображение приблизительным весом до 10-15 килобайт. Но это лично моё мнение!
Вэб-дизайнер может использовать любой размер прелоадера, который подходит по его мнению. И таким прелоадером может стать не только лёгкая анимация в виде полоски, показывающей процесс загрузки, но и более сложная в виде качественного мультика или рекламного ролика.
У каждого вэб-сайта свой класс посетителей и его владелец сам вправе решать насколько ему позволительно отнимать их время.
К примеру существуют сайты, посетители которых разобьются в лепёшку и будут ждать всё что им покажут, пока они получат долгожданный контент. И в таком случае владелец сайта, чувствуя себя уверенно, может занять их внимание на долгое время какой нибуть экзотической анимацией.
А другой владелец сайта дорожит своим временем и считаясь с временем посетителя может просто проинформировать его о том, что всё-таки процесс загрузки идёт каким нибудь лёгким графическим или текстовым информером.
Теперь встаёт вопрос: – "Где же взять прелоадер и как его подключить к нашему основному флэш-проекту? "
Если Вы не знаете как самостоятельно создать и подключить его, то хочу порекомендовать программу, которая подключает прелоадеры, имеющиеся в её арсенале. А так же с помощью неё можно подключить импортированный прелоадер, созданный вами самими или кем-нибудь другим.
Итак, парни. Поднимите руку, кто не знает, что такое прелоадер. Полагаю никто не купился, а если все же чья-то дрожащая рука мелькает, то предлагаю нажать на компе кнопку Reset и полюбоваться на самый настоящий прелоадер.
Для всех остальных, кто ухмыльнулся и проигнорировал мой вредный совет, я продолжу урок.
Удивительное дело, едва программист создал свою программу, как ему хочется внедрить в нее полосу загрузки. А вдруг, кто подумает, что она банально зависла, а не качает терабайт данных из сети Интернет! Знаете, как-то приятно осознавать, что пользователь любуется ползущей полоской, а не проклинает криворуких создателей. Поэтому, давайте приступим к уроку и разберемся с этим самым прелоадером.
Теоретический ликбез
Прелоадер работает в тесной связке с загрузчиком, который в Blend4Web реализуется в виде функции load из модуля data. Обычно структура загрузчика выглядит так:
Здесь функция load генерирует два события, где первое вызывается после окончании загрузки файла, а второе постоянно возвращает числовой результат процесса. Поэтому, основная работа с прелоадером концентрируется именно в обработчике события preloader_cb.
Прелоадер за две секунды
Не верите? Нам понадобятся только эти две команды:
Простая «полоска» за две секунды.
С их помощью можно очень быстро и без труда создать простейшую полоску загрузки. Вот рабочий пример:
Включаем «форсаж»
Разработчики предусмотрели некоторые опции, которые помогут разнообразить стандартную палитру прелоадера.
Всего несколько опций и экран «расцвёл».
Для этого достаточно определить цвета в функции create_preloader():
Режим эксперта
Лучшего результата можно достичь, если сделать свой собственный прелоадер.
Экран загрузки из игры «Сказ о Пятигоре».
Несколько месяцев назад разработчики Blend4Web заявили о релизе браузерной игры «Сказ о Пятигоре». Исходники её открыты и доступны в дистрибутиве SDK. Так что вы можете не только наслаждаться интересным геймплеем и красочностью игры сделанной на Blend4Web, но и познакомиться с внутренней «кухней».
Отличным примером создания собственного прелоадера может служить соответствующий код в Пятигоре.
Основой его является всё та же схема загрузки, приведенная выше. Однако здесь не используются функции модуля preloader. Смысл заключается во взаимодействии кода на JavaScript с HTML и CSS. Давайте рассмотрим, как это работает.
Канвас приложения и экран загрузки могут быть отдельными html-элементами. Собственно, так и сделано в Пятигоре. Это позволяет с легкостью управлять ими через JavaScript:
Здесь, элемент "main_canvas_container" — канвас приложения, а "preloader_cont" отвечает за экран загрузки.
Конечно, стиль веб-страницы лучше всего описывать в файле CSS. Я не стану вдаваться в подробности этого процесса, а просто приведу соответствующий кусок кода, взятый из Пятигора:
Здесь описывается каждый графический элемент используемый в построении экрана загрузки. Обратите внимание на опцию visibility у блока #preloader_cont. Именно с его помощью можно управлять показом экрана загрузки.
Перед выполнением загрузки активируется экран прелоадера. Функция getElementById() возвращает нужный html-элемент у которого изменяется свойство стиля visibility (см. листинг CSS).
Так как функция preloader_cb возвращает процентное значение от выполненного действия, то этим можно воспользоваться, чтобы перерисовывать соответствующие области экрана.
В примере ниже, изменяется свойство width у стиля, описывающего полосу загрузки. Первоначальное значение его равно нулю, которое, в соответствии с переменной percentage, динамически изменяется. Таким же способом корректируется числовое значение результата работы.
Обратите внимание, что после завершения загрузки потребуется скрыть html-элемент preloader_cont.
Это всего-лишь пример создания собственного прелоадера. Не забывайте, что используя Blend4Web, к вашим услугам остаются все возможности современных браузерных технологий: HTML5, CSS3, jQuery (дополните этот список сами). В этом и проявляется гибкость и мощь нашего любимого фреймворка. Удачи в создании крутых прелоадеров!
Но пока интернет-провайдеры меряются мегабитами в секунду, «тяжелеет» и контент. И это правильно, но, как понимаете, чревато проблемами со скоростью. Фактором может быть что угодно: от вялого хостера до старого браузера пользователя.
Как дать пользователю счастье, если на загрузку странички нужно время? Подарить ему универсальную игрушку-погремушку — лоадер.
Самолеты вполне могли бы делать без иллюминаторов, автобусы — без окон, а экран инсталлятора программы — без полосы прогресса.
Зачем все эти приблуды конечному пользователю? В транспорте он вполне может смотреть кино на планшете, есть рыбу/курицу, читать книгу или видеть сны.
Типичный вид из иллюминатора, вопреки ожиданиям. И так 8 часов.
А пока устанавливается GTA — сходить покурить или ужин приготовить. Давайте так и сделаем?
— Нет? Вам так некомфортно?
У обывателя должна быть пресловутая иллюзия контроля. Вы смотрите в крошечное неудобное самолетное окошко: и вам кажется, что под крылом проплывают знакомые пейзажи с географического атласа, вы видите, когда эта алюминиевая махина набирает высоту и снижается. Сразу становится спокойнее.
То же самое и с лоадером: фактически вы можете не знать, сколько еще минут (часов?) продлится распаковка архива, но вот на экране уже половина этой синей «колбасы», а значит, всё не так уж плохо!