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

 
0
 
JavaScript
ava
HappyMan | 18.10.2004, 21:46
Мне нужно, чтоб при входе на мой сайт появлялся индикатор загрузки, т.е есть какая-нить полоска и через определенный промежуток времени, например через секунду - она ( полоска) растягивается и с низу на 1 увеличиваются проценты, таким образом создается иллюзия того что сайт загружается (типа как в винде когда файл копируешь). Знаю что есть много всяких способов это сделать, но мне нужно именно на ЖаваСкрипт.
Comments (16)
ava
Aliance | 18.10.2004, 22:22 #

<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
ava
HappyMan | 18.10.2004, 23:30 #
Aliance
странно но там ничего не видно, кроме кнопки Ресет..............
ava
Sardar | 18.10.2004, 23:48 #
Лучше всего сделай слой с высотой, шириной, в беграунде картинку(шириной в один пиксель, градиент, что бы было красиво smile), позиция релативная. Оборачиваем в span/div(overflow: hidden, такая же ширина, высота) смотря как в страницу вставлять будешь. Ставим позицию слоя с картинкой в -ширина слоя, это у нас 0%, теперь сдвигаем вправо постепенно, это у нас загрузка.
Добавляем мелкие графичексие детали, готово =)

Извини без кода, попросту нет времени, но сделать очень просто smile
ava
Aliance | 19.10.2004, 11:40 #
HappyMan
Мой код был такой, что были 2 кнопки, вторая запускала onclick="Bar()", но т.к. тебе нужно показывать "загрузку" страницы - я сделал body onload="Bar()", значит нужно более продумать... Освобожусь - сделаю
ava
GoodBoy | 19.10.2004, 11:57 #
Цитата (Aliance @ 19.10.2004, 12:40)
body onload="Bar()"

событие onload вызывается после полной загрузки страницы...
ava
HappyMan | 19.10.2004, 20:13 #
Sardar
На словах - все легко! а вот на деле.....

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

GoodBoy
и что? хочешь сказать что я не дождался пока загрузится страница?
ava
Wowa | 20.10.2004, 00:40 #
Цитата (HappyMan @ 19.10.2004, 19:13)
и что? хочешь сказать что я не дождался пока загрузится страница?

А мы откуда знаем? Описывай подробнее.
added later:
HappyMan Подумай над определением полной загрузки.
ava
HappyMan | 20.10.2004, 15:24 #
Admin
что-то я не понимаю.... Как загрузка может быть полной? загрузка есть загрузка....
ava
GoodBoy | 20.10.2004, 15:29 #
Цитата (HappyMan @ 20.10.2004, 16:24)
что-то я не понимаю.... Как загрузка может быть полной? загрузка есть загрузка....

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

<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();

Только поставь предел прогресса....
ava
Gold Dragon | 20.10.2004, 15:35 #
А нельзя распихать по странице типа индикаторов, которые по мере загрузки и будут вызывать функцию рисования индикатора?
ava
Irokez | 20.10.2004, 15:39 #
Цитата (Red @ 20.10.2004, 15:35)
А нельзя распихать по странице типа индикаторов, которые по мере загрузки и будут вызывать функцию рисования индикатора?

можно, моим кодом (см выше), единственная проблема - определить момент окончания загрузки, тк событие OnLoad есть только у формы и страницы...но можно что нибудь-придумать...
ava
HappyMan | 20.10.2004, 17:13 #
Irokez
ЧТП, спасибо
ava
Sardar | 23.10.2004, 02:15 #
Цитата (HappyMan @ 19.10.2004, 19:13)
Sardar

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

Времени ноль, звиняюсь. Но вдруг мне самому понадобился такой индикатор, вот мой вариант кода: http://files.vingrad.ru/Sardar/ProgressBar/ProgressBar.htm
ava
Nobody | 23.10.2004, 02:22 #
Sardar
хе-хе)) забавно оно работает. Медленно-медленно доходит до 100%, а потом сбрасывается на 50% =)
ava
Sardar | 23.10.2004, 13:55 #
Дык а ты в исходник посмотри ;-)
var pr=new ProgressBar(300, 30); //новый прогрес бар
document.body.appendChild(pr.layout);
pr.nextStep(); //в конструкторе задали 30 шагов, на следующий шаг
var tmr=window.setInterval("pr.nextStep()", 500); //ну и по шагам далее
pr.addEventListener("end", function(prg){ //ловим событие, если бар на 100%
window.clearInterval(tmr); //сбросим таймер
prg.setValue(50);} //установим бар на 50%
);

Это просто была проверка событий. Впрочем событий start/end мало, сделаю на каждый процент.
Еще нужна "лавая загрузка" как в ИЕ, когда сервер не отвечает, а прогресс бар все таки движестся по экспоненте до 60%.
Please register or login to write.
Firm of day
Вы также можете добавить свою фирму в каталог IT-фирм, и публиковать статьи, новости, вакансии и другую информацию от имени фирмы.
Подробнее
Contributors
advanced
Submit