События

Прелоадер - это просто!

2016-08-11

Итак, парни. Поднимите руку, кто не знает, что такое прелоадер. Полагаю никто не купился, а если все же чья-то дрожащая рука мелькает, то предлагаю нажать на компе кнопку Reset и полюбоваться на самый настоящий прелоадер.

Для всех остальных, кто ухмыльнулся и проигнорировал мой вредный совет, я продолжу урок.

Удивительное дело, едва программист создал свою программу, как ему хочется внедрить в нее полосу загрузки. А вдруг, кто подумает, что она банально зависла, а не качает терабайт данных из сети Интернет! Знаете, как-то приятно осознавать, что пользователь любуется ползущей полоской, а не проклинает криворуких создателей. Поэтому, давайте приступим к уроку и разберемся с этим самым прелоадером.

Теоретический ликбез

Прелоадер работает в тесной связке с загрузчиком, который в Blend4Web реализуется в виде функции load из модуля data. Обычно структура загрузчика выглядит так:

var m_data      = require("data");
var m_preloader = require("preloader");

function load() {
    m_data.load("filename.json", load_cb, preloader_cb);
}

function load_cb(data_id) {

}

function preloader_cb(percentage) {

}

Здесь функция load генерирует два события, где первое вызывается после окончании загрузки файла, а второе постоянно возвращает числовой результат процесса. Поэтому, основная работа с прелоадером концентрируется именно в обработчике события preloader_cb.

Прелоадер за две секунды

Не верите? Нам понадобятся только эти две команды:

m_preloader.create_preloader();
m_preloader.update_preloader();

Простая «полоска» за две секунды.

С их помощью можно очень быстро и без труда создать простейшую полоску загрузки. Вот рабочий пример:

var m_data      = require("data");
var m_preloader = require("preloader");

function load() {
    m_preloader.create_preloader();
    m_data.load("filename.json", load_cb, preloader_cb);
}

function load_cb(data_id) {

}

function preloader_cb(percentage) {
    m_preloader.update_preloader(percentage);
}

Включаем «форсаж»

Разработчики предусмотрели некоторые опции, которые помогут разнообразить стандартную палитру прелоадера.

Всего несколько опций и экран «расцвёл».

Для этого достаточно определить цвета в функции create_preloader():

var m_data      = require("data");
var m_preloader = require("preloader");

function load() {
    m_preloader.create_preloader({
        container_color:"#a0e5ff", // background color of the container 
        bar_color:"#fa200", // background color of the bar 
        frame_color: "#f35600", // color of the frame border
        font_color: "#000" // color of the font
    });
    m_data.load("filename.json", load_cb, preloader_cb);
}

function load_cb(data_id) {

}

function preloader_cb(percentage) {
    m_preloader.update_preloader(percentage);
}

Режим эксперта

Лучшего результата можно достичь, если сделать свой собственный прелоадер.

Экран загрузки из игры «Сказ о Пятигоре».

Несколько месяцев назад разработчики Blend4Web заявили о релизе браузерной игры «Сказ о Пятигоре». Исходники её открыты и доступны в дистрибутиве SDK. Так что вы можете не только наслаждаться интересным геймплеем и красочностью игры сделанной на Blend4Web, но и познакомиться с внутренней «кухней».

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

Основой его является всё та же схема загрузки, приведенная выше. Однако здесь не используются функции модуля preloader. Смысл заключается во взаимодействии кода на JavaScript с HTML и CSS. Давайте рассмотрим, как это работает.

Файл HTML

Канвас приложения и экран загрузки могут быть отдельными html-элементами. Собственно, так и сделано в Пятигоре. Это позволяет с легкостью управлять ими через JavaScript:

<body>
    <div id="main_canvas_container"></div>
    <div id="preloader_cont">
        <div id="prelod_static_path">
        <div id="prelod_dynamic_path"></div>
            <span>0%</span>
        </div>
    </div>
</body>

Здесь, элемент "main_canvas_container" — канвас приложения, а "preloader_cont" отвечает за экран загрузки.

Файл CSS

Конечно, стиль веб-страницы лучше всего описывать в файле CSS. Я не стану вдаваться в подробности этого процесса, а просто приведу соответствующий кусок кода, взятый из Пятигора:

div#prelod_static_path {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 395px;
    height: 134px;
    margin-left: -197px;
    margin-top: -75px;
}
div#prelod_dynamic_path {
    position: absolute;
    left: 0;
    top: 0;
    width: 0%;
    height: 100%;
    background-image: url(images/loader_bar_line.png);
}
div#preloader_cont {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-image: url(images/preloader_bg.jpg);
    background-color: #171717;
    background-repeat: no-repeat;
    background-position: center center;
    visibility: hidden;
}

Здесь описывается каждый графический элемент используемый в построении экрана загрузки. Обратите внимание на опцию visibility у блока #preloader_cont. Именно с его помощью можно управлять показом экрана загрузки.

Файл JavaScript

Перед выполнением загрузки активируется экран прелоадера. Функция getElementById() возвращает нужный html-элемент у которого изменяется свойство стиля visibility (см. листинг CSS).

function load() {
    var preloader_cont = document.getElementById("preloader_cont");
    preloader_cont.style.visibility = "visible";
    m_data.load("filename.json", load_cb, preloader_cb);
}

Так как функция preloader_cb возвращает процентное значение от выполненного действия, то этим можно воспользоваться, чтобы перерисовывать соответствующие области экрана.

В примере ниже, изменяется свойство width у стиля, описывающего полосу загрузки. Первоначальное значение его равно нулю, которое, в соответствии с переменной percentage, динамически изменяется. Таким же способом корректируется числовое значение результата работы.

Обратите внимание, что после завершения загрузки потребуется скрыть html-элемент preloader_cont.

function preloader_cb(percentage) {
    var prelod_dynamic_path = document.getElementById("prelod_dynamic_path");
    var percantage_num      = prelod_dynamic_path.nextElementSibling;

    prelod_dynamic_path.style.width = percentage + "%";
    percantage_num.innerHTML = percentage + "%";	   
    if (percentage == 100) {
        var preloader_cont = document.getElementById("preloader_cont");
	preloader_cont.style.visibility = "hidden";
        return;
    }
}

Это всего-лишь пример создания собственного прелоадера. Не забывайте, что используя Blend4Web, к вашим услугам остаются все возможности современных браузерных технологий: HTML5, CSS3, jQuery (дополните этот список сами). В этом и проявляется гибкость и мощь нашего любимого фреймворка. Удачи в создании крутых прелоадеров!

Комментарии
16 авг. 2021 08:25
<a href=https://poleznye-sovety.kok7.ru/watch.php?vid=29300aef9>Как выбрать шторы - советы домашний уют</a>
Вас не устраивает ваша жизнь?<br>Подборка наших видео помогут вам.<br> Запомните можно решить любую задачу.<br> Посмотрите наши видео подборки.<br> Мы постарались собрать много ответов на разные вопросы…<br> Переходите по ссылке и смотрите прямо сейчас -
<a href=https://smotri-onlajn.kok7.ru>домашний бизнес с нуля</a>
<a href=https://female-rus.ru>полезные советы для мужчин по хозяйству</a>
<a href=https://krasotka.info-sovety.ru>служба социальной помощи семье</a>
25 дек. 2021 23:39
Игровые автоматы https://pin-up-casino.cyou/ Казино имеют официальную лицензию и стабильно выплачивают игрокам их выигрыши!
13 июл. 2022 11:33
Ответ на сообщение пользователя avese
http://reyna.userbet.xyz/?lp=dollars ПРИСОЕДИНЯЙТЕСЬ СЕЙЧАС И ПОЛУЧИТЕ 100$ К ВАШЕМУ ПЕРВОМУ ДЕПОЗИТУ!
Управляйте роботом самостоятельно! Контроль уровня риска!

https://bit.ly/36BXmIy Секрет заработка на криптовалюте
Find out right away whether you qualify! <a href="https://wordletoday.io/">wordle today</a>
07 авг. 2022 22:52
NETHERLANDS JOIN ILLUMINATI SOCIETY TODAY, + 256783573282 USA HOW TO JOIN ILLUMINATI FOR POWER, WEALTH, FAME AND MONEY 100%,USA RICH FAME POWERS Australia, Austria, Azerbaijan, The Bahamas, Bahrain, Europe, USA, Finland, Miami, Sedona, Philadelphia, Phoenix,USA, UK LONDON, SWEDEN AUSTRIA, SOUTH AFRICA, BELGIUM, JAPAN , ITALY, FRANCE*…| NEW ORDER WORLD ILLUMINATI SECRET SOCIETY+ 256783573282 NETHERLANDS HOW TO JOIN 666 ILLUMINATI FOR MONEY +256783573282 USA Australia, Canada I WANT TO JOIN ILLUMINATI SOCIETY + 256783573282, FOR POWER, WEALTH, FAME ANDBrisbane, Adelaide, Darwin, Alice Springs, Sydney, Perth, Canberra, Esch-sur-Alzette, Differdange, Dudelange, Ettelbruck, Diekirch, Hougang, Tampines, Pasir Ris, Yishun, Choa Chu Kang, Toa *Kuwait #*Bahrain #*Soudi Arabia #*Singapore #*Jordan #*Ireland, # b*Belgium, #*United Kingdom, #*Iceland, #*Portugal, Spain, China, Japan, Turkey, Canada United States, Morocco, France,Germany, Poland Serbia,Romania, Ukraine, and all countries United Arab Emirates .WELCOME TO THE GREAT ILLUMINATI ======== Powers 666 how to join illuminat +256783573282 where to join illuminati secret society for money. +256783573282 AUSTRIA HOW TO JOIN ILLUMINATI 666 AND BE RICH AND FAMOUS FOREVER

AUSTRIA +256783573282 HOW TO JOIN ILLUMINATI 666 TODAY ONLINE FOR MONEY USA UK NO blood shedding NORTH CAROLINA NEW JERSEY


BOTSWANA +256783573282 HOW TO JOIN 666 ILLUMINATI SECRET RICH SOCIETY 100% FOR MONEY PROTECTION Australia, Canada, Dubai, Germany


BILLIONAIRES HOUSE HOW TO JOIN 666 ILLUMINATI SECRET SOCIETY FOR MONEY +256783573282 USA,Dallas, Spain, Germany, .., UK, Belgium, Czech Republic, Sweden how to join illuminati, Australia. Are you frustrated in life. What type of wealth do you want? Today the Lucifer has order us to bring member to his kingdom. Are you tired of poverty and now you want fame, power and rich. Our magical powers are beyond your imagination. we could do magic on your behalf regarding, your financial situation, future events, or whatever is important to you. we have the power and we use the power. we are Illuminati, and we could change the course of destiny. Get to us and we shall help you. Tell us what it is you want and we shall go about our work. Is it someone or something you desire to have? Do you want wealth (Want to grow your bank account?,Need funds to enjoy the good life?Tired of working hard and getting know where?) Or happiness? the most power society welcomes you to Illuminati .. contact Illuminati initiation home Send us your most important desire and we shall work our powers in your favor. When filling out the online order form, be sure to tell Illuminati what you want! + 256783573282) Note: Its not a child's play, its for those who are desperate and ready to make a change in their life. Above all its + 256783573282 We are seeking that special wisdom and knowledge that would set us free from the bondage to dull and dreary everyday life, while strengthening us in body, mind and spirit, and bringing us the material rewards of wealth, love, and success. The karishika Brotherhood is a true brotherhood of secret knowledge and power. membership into our fraternity is free and normally through a thorough screening. we are here to liberate those who need wealth, riches, power, prosperity, protection and success in all ramification. Agent Nyonjo brotherhood offers all initiate members growth, wealth, fame, power, prosperity and success in all areas of heart desires. we do not demand human sacrifice, the use of any human parts or early personal death as a precondition for you to become our member. we are not suppose to be on the internet but because of questions and comments like: I WANT TO JOIN OCCULT IN SOUTH AFRICA. I WANT TO JOIN REAL OCCULT IN BOTSWANA. I WANT TO JOIN OCCULT TO MAKE MONEY. I WANT TO JOIN OCCULT FOR MONEY. I WANT TO JOIN OCCULT FOR MONEY RITUAL. I WANT TO JOIN OCCULT IN AFRICA TO BE RICH. I WANT TO JOIN GOOD OCCULT FRATERNITY IN SOUTH AFRICA / BOTSWANA. I WANT TO JOIN GREAT ILLUMINATI IN SOUTH AFRICA FOR RICHES. I WANT TO JOIN ILLUMINATI OCCULT IN SOUTH AFRICA OR BOTSWANA. + 256783573282 I WANT TO JOIN ILLUMINATI BROTHERHOOD IN SOUTH AFRICA OR BOTSWANA. HOW TO JOIN OCCULT IN SOUTHAFRICA. HOW TO JOIN REAL OCCULT IN BOTSWANA. HOW TO JOIN OCCULT TO MAKE MONEY. HOW TO JOIN OCCULT FOR MONEY. HOW TO JOIN OCCULT FOR MONEY RITUAL. HOW TO JOIN OCCULT IN AFRICA TO BE RICH. HOW TO JOIN GOOD OCCULT FRATERNITY IN SOUTH AFRICA. HOW TO JOIN GREAT ILLUMINATI IN BOTSWANA FOR RICHES. HOW TO JOIN ILLUMINATI OCCULT IN SOUTH AFRICA OR BOTSWANA HOW TO JOIN ILLUMINATI BROTHERHOOD IN SOUTH AFRICA OR. HOW TO MAKE MONEY ONLINE. HOW TO MAKE MONEY IN USA . HOW TO MAKE MONEY IN GHANA. HOW TO MAKE MONEY BY JOINING OCCULT. HOW TO MAKE MONEY BY JOINING ILLUMINATI. FOR THOSE OF YOU WHO: want to join occult in south Africa how can i join secret society or cult to make money how can join occult for riches i want to be rich but i do not know how etc. how do i do money ritual how do i join good occult that will not affect me and my family forever we are now here for you. Kindly contact us on+ 256783573282 HOW TO JOIN OCCULT IN AFRICA TO BE RICH. HOW TO JOIN GOOD OCCULT FRATERNITY IN SOUTH AFRICA. HOW TO JOIN GREAT ILLUMINATI IN BOTSWANA FOR RICHES. HOW TO JOIN ILLUMINATI OCCULT IN SOUTH AFRICA OR BOTSWANA HOW TO JOIN ILLUMINATI BROTHERHOOD IN SOUTH AFRICA OR. HOW TO MAKE MONEY ONLINE. HOW TO MAKE MONEY IN NIGERIA. HOW TO MAKE MONEY IN GHANA. HOW TO MAKE MONEY BY JOINING OCCULT. HOW TO MAKE MONEY BY JOINING ILLUMINATI. FOR THOSE OF YOU WHO: want to join occult in south Africa how can i join secret society or cult to make money how can join occult for riches i want to be rich but i do not know how etc. how do i do money ritual how do i join good occult that will not affect me and my family forever we are now here for you. Kindly contact us on + 256783573282 HOW TO JOIN OCCULT IN AFRICA TO BE RICH. HOW TO JOIN GOOD OCCULT FRATERNITY IN SOUTH AFRICA. HOW TO JOIN GREAT ILLUMINATI IN BOTSWANA FOR RICHES. HOW TO JOIN ILLUMINATI OCCULT IN SOUTH AFRICA OR BOTSWANA HOW TO JOIN ILLUMINATI BROTHERHOOD IN SOUTH AFRICA OR. HOW TO MAKE MONEY ONLINE. HOW TO MAKE MONEY IN USA HOW TO MAKE MONEY IN GHANA. HOW TO MAKE MONEY BY JOINING OCCULT. HOW TO MAKE MONEY BY JOINING ILLUMINATI. FOR THOSE OF YOU WHO: want to join occult in south Africa how can i join secret society or cult to make money how can join occult for riches i want to be rich but i do not know how etc. how do i do money ritual how do i join good occult that will not affect me and my family forever we are now here for you. Kindly contact us on + 256783573282 r email: HOW TO JOIN GREAT ILLUMINATI IN BOTSWANA FOR RICHES. HOW TO JOIN ILLUMINATI OCCULT IN SOUTH AFRICA OR BOTSWANA HOW TO JOIN ILLUMINATI BROTHERHOOD IN SOUTH AFRICA OR. HOW TO MAKE MONEY ONLINE. HOW TO MAKE MONEY IN USA . HOW TO MAKE MONEY IN GHANA. HOW TO MAKE MONEY BY JOINING OCCULT. HOW TO MAKE MONEY BY JOINING ILLUMINATI. FOR THOSE OF YOU WHO: want to join occult in south Africa how can i join secret society or cult to make money how can join occult for riches i want to be rich but i do not know how etc. how do i do money ritual how do i join good occult that will not affect me and my family forever we are now here for you . Kindly contact us on + 256783573282 or email: HOW TO JOIN GREAT ILLUMINATI IN BOTSWANA FOR RICHES. HOW TO JOIN ILLUMINATI OCCULT IN SOUTH AFRICA OR BOTSWANA HOW TO JOIN ILLUMINATI BROTHERHOOD IN SOUTH AFRICA OR. HOW TO MAKE MONEY 239954ONLINE. HOW TO MAKE MONEY IN CANADA. HOW TO MAKE MONEY IN GHANA. HOW TO MAKE MONEY BY JOINING OCCULT. HOW TO MAKE MONEY BY JOINING ILLUMINATI. FOR THOSE OF YOU WHO: want to join occult in south Africa how can i join secret society or cult to make money how can join occult for riches i want to be rich but i do not know how etc. how do i do money ritual how do i join good occult that will not affect me and my family forever we are now here for you. Kindly contact us on + 256783573282 or email: HOW TO MAKE MONEY IN USA. HOW TO MAKE MONEY IN GHANA. HOW TO MAKE MONEY BY JOINING OCCULT. HOW TO MAKE MONEY BY JOINING ILLUMINATI . FOR THOSE OF YOU WHO: want to join occult in south Africa how can i join secret society or cult to make money how can join occult for riches i want to be rich but i do not know how etc. how do i do money ritual how do i join good occult that will not affect me and my family forever we are now here for you. Kindly contact us on+ 256783573282 or email: HOW TO MAKE MONEY IN ENGLAND HOW TO MAKE MONEY IN GHANA. HOW TO MAKE MONEY BY JOINING OCCULT. HOW TO MAKE MONEY BY JOINING ILLUMINATI. FOR THOSE OF YOU WHO: want to join occult in south Africa how can i join secret society or cult to make money how can join occult for riches i want to be rich but i do not know how etc. how do i do money ritual how do i join good occult that will not affect me and my family forever we are now here for you. Kindly contact us on+ 256783573282 or email: how do i do money ritual how do i join good occult that will not affect me and my family forever we are now here for you. Kindly contact us on EMAIL : illuminatinyonga666join@gmail.comhow do i do money ritual how do i join good occult that will not affect me and my family forever we are now here for you. Kindly contact us on + 256783573282 or EMAIL : illuminatinyonga666join@gmail.com
Пожалуйста, зарегистрируйтесь или войдите под своей учетной записью , чтобы оставлять сообщения.