Форум

create_advanced_preloader

04 апреля 2015 12:41
#1963
CyberKatana
Помогите пожалуйста разобраться со структурой html для этой функции(возможно это не функция, путаюсь в терминологии).
Как я пытался это победить.
<div id="canvas3d"></div>
        <div id="background_container_id"></div>
        <div id="preloader_bar_id"></div>
        <div id="fill_band_id"></div>
        <div id="preloader_caption_id"></div>
        <div id="preloader_container_id"></div>
        <div id="img_width"></div>
        <div id="preloader_width"></div>

а дальше добавляем стили для этих контейнеров, дабы стилизовать под себя прелоадер, но у меня ничего не вышло
На всякий случай, вот так я инициализирую прелоадер:
m_preloader.create_advanced_preloader({
            canvas_container_id: "canvas3d",
            background_container_id: "background_container_id",
            preloader_bar_id: "preloader_bar_id",
            fill_band_id: "fill_band_id",
            preloader_caption_id: "preloader_caption_id",
            preloader_container_id: "preloader_container_id",
            img_width: 900,
            preloader_width: 500,
            preloader_fadeout: true})
06 апреля 2015 09:57
#1964
Семенцов Роман
Добрый день. Приверду пример прелоудера из нашей демонстрационной сцены "Остров" (исходники доступны в бесплатном SDK):
<div id="preloader_container">
    <div id="preloader_frame">
        <div id="preloader_left"></div>
        <div id="preloader_bar"></div>
        <div id="plane_icon">
            <div id="preloader_caption"></div>
        </div>
        <div id="fill_container">
            <div id="fill_band"></div>
        </div>
        <div id="preloader_right"></div>
    </div>
</div>

Обратите внимание на иерархию элементов.
Теперь инициализация:
m_preloader.create_advanced_preloader({
        img_width: 165,
        preloader_width: 460,
        preloader_bar_id: "preloader_bar",
        fill_band_id: "fill_band",
        preloader_caption_id: "preloader_caption",
        preloader_container_id: "preloader_container",
        background_container_id: "background_image_container",
        canvas_container_id: "main_canvas_container"
    });

И обратите внимание на CSS-файл для этого приложения. Прикрепляю его к этому сообщению. Для большей наглядности лучше изучить эту сцену (apps_dev/flight) из SDK. Там же находятся графические файлы для создания прелоудера.
09 апреля 2015 20:12
#2003
CyberKatana
Долго бился, но победил. В процессе победы возник вопрос(из-за него и бился):
<div id="preloader_container">
    <div id="preloader_frame">
        <div id="preloader_left"></div>
        <div id="preloader_bar"></div>
        <div id="plane_icon">
            <div id="preloader_caption"></div>
        </div>
        <div id="fill_container">
            <div id="fill_band"></div>
        </div>
        <div id="preloader_right"></div>
    </div>
</div>


div#preloader_frame {
    position:absolute;
    left: 50%;
    top: 50%;
    width: 499px;
    height: 134px;
    margin-left: -300px;
    z-index: 4;
    margin-top: -80px;
    visibility: hidden;
}

m_preloader.create_advanced_preloader({
        img_width: 165,
        preloader_width: 460,
        preloader_bar_id: "preloader_bar",
        fill_band_id: "fill_band",
        preloader_caption_id: "preloader_caption",
        preloader_container_id: "preloader_container",
        background_container_id: "background_image_container",
        canvas_container_id: "main_canvas_container"
    });

    var preloader_frame = document.getElementById("preloader_frame");

    preloader_frame.style.visibility = "visible";

Вот собственно с какой целью вы прячете div#preloader_frame, а потом с помощью js отображаете?
10 апреля 2015 10:10
#2007
Семенцов Роман

Вот собственно с какой целью вы прячете div#preloader_frame, а потом с помощью js отображаете?
Тут так реализовано ожидание загрузки изображения для прелоудера
 
Пожалуйста, зарегистрируйтесь или войдите под своей учетной записью , чтобы оставлять сообщения.