VPF::Как сделать индикатор прогреса!

HappyMan

Дата 18.10.2004, 20:46 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 347
Регистрация: 29.7.2004

Репутация: 0
Всего: 2

Мне нужно, чтоб при входе на мой сайт появлялся индикатор загрузки, т.е есть какая-нить полоска и через определенный промежуток времени, например через секунду - она ( полоска) растягивается и с низу на 1 увеличиваются проценты, таким образом создается иллюзия того что сайт загружается (типа как в винде когда файл копируешь). Знаю что есть много всяких способов это сделать, но мне нужно именно на ЖаваСкрипт.

Это сообщение отредактировал(а) HappyMan - 18.10.2004, 20:48

--------------------

Цитата

Желательно на 100%.

Aliance

Дата 18.10.2004, 22:22 (ссылка)

(нет голосов)

Загрузка ...

I ♥ <script>

Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 55
Всего: 137

Код


<html>
<head>
<title>title</title>
<style type="text/css">
#progressBar {position:absolute;
              width:400px; 
              height:35px; 
              visibility:hidden;
              background-color:#99ccff; 
              padding:20px;
              border-width:2px;
              border-left-color:#9999ff; 
              border-top-color:#9999ff;
              border-right-color:#666666;

              border-bottom-color:#666666; 
              border-style:solid;
             }
#progressBarMsg {position:absolute;
                 left:10px; 
                 top:10px; 
                 font:18px Verdana, Helvetica, sans-serif bold
                }
#sliderWrapper {position:absolute; 
                left:10px; 
                top:40px; 
                width:417px; 
                height:15px;
                background-color:#ffffff; 
                border:1px solid #000000; 
                text-align:center;
                font-size:12px
               }
#slider{position:absolute; 
        left:0px; 
        top:0px; 
        width:420px; 
        height:15px;
        clip:rect(0px 0px 15px 0px);
        background-color:#666699; 
        text-align:center; 
        color:#ffffff; 
        font-size:12px
       }
</style>

<script type="text/javascript">
// позиционируем элемент

function centerOnWindow(elemID) {
    // 'obj' поз. эл-нт
    var obj = getRawObject(elemID);
    // положения window scroll 
    var scrollX = 0, scrollY = 0;
    if (document.body && typeof document.body.scrollTop != "undefined") {
        scrollX += document.body.scrollLeft;
        scrollY += document.body.scrollTop;
        if (document.body.parentNode && typeof document.body.parentNode.scrollTop != "undefined") {
            scrollX += document.body.parentNode.scrollLeft;
            scrollY += document.body.parentNode.scrollTop
        }
    } else if (typeof window.pageXOffset != "undefined") {
        scrollX += window.pageXOffset;
        scrollY += window.pageYOffset;
    }
    var x = Math.round((getInsideWindowWidth()/2) - (getObjectWidth(obj)/2)) + scrollX;
    var y = Math.round((getInsideWindowHeight()/2) -  (getObjectHeight(obj)/2)) + scrollY;
    shiftTo(obj, x, y);
    show(obj);
}

function initProgressBar() {
	// создаем объект	
	if (navigator.appName == "Microsoft Internet Explorer" && navigator.userAgent.indexOf("Win") != -1 && 
        (typeof document.compatMode == "undefined" || document.compatMode == "BackCompat")) {
        document.getElementById("progressBar").style.height = "81px";
        document.getElementById("progressBar").style.width = "444px";
        document.getElementById("sliderWrapper").style.fontSize = "xx-small";
        document.getElementById("slider").style.fontSize = "xx-small";
        document.getElementById("slider").style.height = "13px";
        document.getElementById("slider").style.width = "415px";
    }
}

function showProgressBar() {
    centerOnWindow("progressBar");
}

//pct - кол-во процентов
//factor * 417 - скорость
function calcProgress(current, total) {
    if (current <= total) {
        var factor = current/total;
        var pct = Math.ceil(factor * 100);
        document.getElementById("sliderWrapper").firstChild.nodeValue = pct + "%";
        document.getElementById("slider").firstChild.nodeValue = pct + "%";
        document.getElementById("slider").style.clip = "rect(0px " + parseInt(factor * 417) + "px 16px 0px)";
    }
}

function hideProgressBar() {
    hide("progressBar");
    calcProgress(0, 0);
}

var loopObject = {start:0, end:10, current:0, interval:null};

function runit() {
    if (loopObject.current <= loopObject.end) {
        calcProgress(loopObject.current, loopObject.end);
        loopObject.current += Math.random();
        loopObject.interval = setTimeout("runit()", 1000);
    } else {
        calcProgress(loopObject.end, loopObject.end);
        loopObject.current = 0;
        loopObject.interval = null;
        setTimeout("hideProgressBar()", 500);
    }
}

function Bar() {
    showProgressBar();
    runit();
}
</script>

</head>
<body onload="initProgressBar(); Bar()">

<button onclick="location.reload()">Reset</button>

<div id="progressBar">
<div id="progressBarMsg">Загрузка...</div>
<div id="sliderWrapper">0%
	<div id="slider">0%</div>
</div>
</div>


</body>
</html>

Есть еще код, показывающий скорость загрузки картинок из кэша.
Данный код можно привести, скажем к полной загрузке сайте, приблизительно указав в скорости window.onload

--------------------

• Все о событиях
• Объекты и массивы
• ОКНА И ФРЕЙМЫ

JAVA ≠ JavaScript

HappyMan

Дата 18.10.2004, 23:30 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 347
Регистрация: 29.7.2004

Репутация: 0
Всего: 2

Aliance
странно но там ничего не видно, кроме кнопки Ресет..............

--------------------

Цитата

Желательно на 100%.

Sardar

Дата 18.10.2004, 23:48 (ссылка)

(нет голосов)

Загрузка ...

Бегун

Профиль
Группа: Модератор
Сообщений: 6986
Регистрация: 19.4.2002
Где: Нидерланды, Groni ngen

Репутация: 78
Всего: 317

Лучше всего сделай слой с высотой, шириной, в беграунде картинку(шириной в один пиксель, градиент, что бы было красиво

), позиция релативная. Оборачиваем в span/div(overflow: hidden, такая же ширина, высота) смотря как в страницу вставлять будешь. Ставим позицию слоя с картинкой в -ширина слоя, это у нас 0%, теперь сдвигаем вправо постепенно, это у нас загрузка.
Добавляем мелкие графичексие детали, готово =)

Извини без кода, попросту нет времени, но сделать очень просто

--------------------

Опыт - сын ошибок трудных © А. С. Пушкин
Процесс написания своего велосипеда повышает профессиональный уровень программиста. © Opik
Оценить мои качества можно тут.

Aliance

Дата 19.10.2004, 11:40 (ссылка)

(нет голосов)

Загрузка ...

I ♥ <script>

Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 55
Всего: 137

HappyMan
Мой код был такой, что были 2 кнопки, вторая запускала onclick="Bar()", но т.к. тебе нужно показывать "загрузку" страницы - я сделал body onload="Bar()", значит нужно более продумать... Освобожусь - сделаю

--------------------

• Все о событиях
• Объекты и массивы
• ОКНА И ФРЕЙМЫ

JAVA ≠ JavaScript

GoodBoy

Дата 19.10.2004, 11:57 (ссылка)

(нет голосов)

Загрузка ...

Главный джедай

Профиль
Группа: Модератор
Сообщений: 3886
Регистрация: 8.1.2003
Где: КМВ

Репутация: 2
Всего: 83

Цитата(Aliance @ 19.10.2004, 12:40)

body onload="Bar()"

событие onload вызывается после полной загрузки страницы...

--------------------

Чем дальше в лес, тем толще партизаны...

Цитата(igorold @ 1.5.2016, 17:40

)

Индейцы не обратили внимания на поток беженцев из Европы… Теперь они живут в резервациях.

HappyMan

Дата 19.10.2004, 20:13 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 347
Регистрация: 29.7.2004

Репутация: 0
Всего: 2

Sardar
На словах - все легко! а вот на деле.....

AlianceAliance
буду ждать, т.к своих идей нету.

GoodBoy
и что? хочешь сказать что я не дождался пока загрузится страница?

--------------------

Цитата

Желательно на 100%.

Wowa

Дата 20.10.2004, 00:40 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Админ
Сообщений: 15017
Регистрация: 14.9.2000
Где: Винград

Репутация: 1
Всего: 290

Цитата(HappyMan @ 19.10.2004, 19:13)

и что? хочешь сказать что я не дождался пока загрузится страница?

А мы откуда знаем? Описывай подробнее.
Добавлено @ 00:42
HappyMan Подумай над определением полной загрузки.

HappyMan

Дата 20.10.2004, 15:24 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 347
Регистрация: 29.7.2004

Репутация: 0
Всего: 2

Admin
что-то я не понимаю.... Как загрузка может быть полной? загрузка есть загрузка....

--------------------

Цитата

Желательно на 100%.

GoodBoy

Дата 20.10.2004, 15:29 (ссылка)

(нет голосов)

Загрузка ...

Главный джедай

Профиль
Группа: Модератор
Сообщений: 3886
Регистрация: 8.1.2003
Где: КМВ

Репутация: 2
Всего: 83

Цитата(HappyMan @ 20.10.2004, 16:24)

что-то я не понимаю.... Как загрузка может быть полной? загрузка есть загрузка....

А ты подумай!!!!! Есть ПРОЦЕСС загрузки, а есть МОМЕНТ окончания загрузки!!!! Так вот этот момент и есть событие onLoad...

--------------------

Чем дальше в лес, тем толще партизаны...

Цитата(igorold @ 1.5.2016, 17:40

)

Индейцы не обратили внимания на поток беженцев из Европы… Теперь они живут в резервациях.

Irokez

Дата 20.10.2004, 15:31 (ссылка)

(нет голосов)

Загрузка ...

индеец

Профиль
Группа: Участник Клуба
Сообщений: 1180
Регистрация: 20.10.2004

Репутация: 1
Всего: 53

Код


<img src=progressbar width=0 height=5 id=progress>
<script language=JavaScript>
function progressBar()
{
    //makes progressBar larger
    document.getElementById('progress').width+=5;
    setTimeout('progressBar()',1000);
}
</script>
progressBar();

Только поставь предел прогресса....

--------------------

Irokez CM - открытая система управления сайтами

Gold Dragon

Дата 20.10.2004, 15:35 (ссылка)

(нет голосов)

Загрузка ...

Призрачный

Профиль
Группа: Экс. модератор
Сообщений: 6753
Регистрация: 1.3.2004
Где: Россия, Тамбов

Репутация: 1
Всего: 71

А нельзя распихать по странице типа индикаторов, которые по мере загрузки и будут вызывать функцию рисования индикатора?

Это сообщение отредактировал(а) Red Dragon - 20.10.2004, 15:35

--------------------

Нельзя жить в прошлом, оно уже прошло.
Нельзя жить в будущем, оно ещё не наступило.
Нужно жить в настоящем, помня прошлое и думая о будущем!

Irokez

Дата 20.10.2004, 15:39 (ссылка)

(нет голосов)

Загрузка ...

индеец

Профиль
Группа: Участник Клуба
Сообщений: 1180
Регистрация: 20.10.2004

Репутация: 1
Всего: 53

Цитата(Red @ 20.10.2004, 15:35)

А нельзя распихать по странице типа индикаторов, которые по мере загрузки и будут вызывать функцию рисования индикатора?

можно, моим кодом (см выше), единственная проблема - определить момент окончания загрузки, тк событие OnLoad есть только у формы и страницы...но можно что нибудь-придумать...

--------------------

Irokez CM - открытая система управления сайтами

HappyMan

Дата 20.10.2004, 17:13 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 347
Регистрация: 29.7.2004

Репутация: 0
Всего: 2

Irokez
ЧТП, спасибо

--------------------

Цитата

Желательно на 100%.

Sardar

Дата 23.10.2004, 02:15 (ссылка)

(нет голосов)

Загрузка ...

Бегун

Профиль
Группа: Модератор
Сообщений: 6986
Регистрация: 19.4.2002
Где: Нидерланды, Groni ngen

Репутация: 78
Всего: 317

Цитата(HappyMan @ 19.10.2004, 19:13)

Sardar
На словах - все легко! а вот на деле.....

Времени ноль, звиняюсь. Но вдруг мне самому понадобился такой индикатор, вот мой вариант кода: http://files.vingrad.ru/Sardar/ProgressBar/ProgressBar.htm

--------------------

1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Общие вопросы \| Следующая тема »