Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: Общие вопросы > ProgressBar

Автор: Swatch 5.11.2008, 14:00

Добрый день.

Хочется сделать ProgressBar, который бы показывал процент загрузки интернет-странички. Кто может чем-то помочь, помогите, пожалуйста!!! Очень хотелось бы посмотреть примеры, может у кого есть, поделитесь, плиз... погуглила, но что-то ничего подходящего для себя не нашла:( smile

Автор: smartov 5.11.2008, 14:33

Swatch, какова задача?
А то у вас постановка вопроса типа "Как накрасить ногти?!"
И сам вопрос "А как накрасить ногти в тменоте и без кисточки"

Как сделать просто progress bar на javascript - это вы можете легко найти в google

Автор: Swatch 5.11.2008, 14:48

хммм, а "ProgressBar, который бы показывал процент загрузки интернет-странички" - это не задача? мне нужно, чтобы пока грузится страничка (на которой показывается календарь и загружаются разные задачки), показывать ProgressBar с процентом загрузки...

то есть, чтобы во время выполнения вот этой функции:

Код


function drawEvents (eventCollection) {            
      if (mainCalendar) {
    eval("mainCalendar.events = [" + eventCollection+"]");                                        
    mainCalendar.drawEvents();                
      }
}

Нашла в интернете разные прогрессбары. попробовала один из них использовать. вот это добавила в код страничка:

Код


<div id="win3" style="position: absolute;border: 1px solid;width: 100px;height: 100px;visibility: hidden;background-color: #000000;" align="center">
         <table>
         <tr/> <tr/>
         <tr>
            <td align="left" style="font-family: Tahoma; font-size: 8pt;">Please, wait...</td>
         </tr>
         <tr>   <td>
             <table align="center"><tr><td>
                <div id="showbar" style="font-size:8pt;padding:2px;border:solid black 1px;visibility:hidden">
                <span id="progress1">&nbsp; &nbsp;</span>
                <span id="progress2">&nbsp; &nbsp;</span>
                <span id="progress3">&nbsp; &nbsp;</span>
                <span id="progress4">&nbsp; &nbsp;</span>
                <span id="progress5">&nbsp; &nbsp;</span>
                <span id="progress6">&nbsp; &nbsp;</span>
                <span id="progress7">&nbsp; &nbsp;</span>
                <span id="progress8">&nbsp; &nbsp;</span>
                <span id="progress9">&nbsp; &nbsp;</span>
                </div>
                </td></tr></table></td>             
         </tr>
       </table>
    </div>

вот это в свою функцию:

Код


var progressEnd = 9; // set to number of progress <span>'s.
        var progressColor = 'blue'; // set to progress bar color
        var progressInterval = 1000; // set to time between updates (milli-seconds)

        var progressAt = progressEnd;
        var progressTimer;
        function progress_clear() {
            for (var i = 1; i <= progressEnd; i++) document.getElementById('progress'+i).style.backgroundColor = 'transparent';
            progressAt = 0;
        }
        function progress_update() {
            document.getElementById('showbar').style.visibility = 'visible';
            progressAt++;
            if (progressAt > progressEnd) progress_clear();
            else document.getElementById('progress'+progressAt).style.backgroundColor = progressColor;
            progressTimer = setTimeout('progress_update()',progressInterval);
        }
        function progress_stop() {
            clearTimeout(progressTimer);
            progress_clear();
            document.getElementById('showbar').style.visibility = 'hidden';
        }
function drawEvents (eventCollection) {            
            obj = document.getElementById("win3");
            obj.style.top = "300 px";
            obj.style.left = "300 px";
            obj.style.visibility = "visible";
            progress_update();
            if (mainCalendar) {
                eval("mainCalendar.events = [" + eventCollection + "]");                                        
                mainCalendar.drawEvents();                
            }
            obj.style.visibility = "hidden";
            progress_stop();
        }

Только что-то ничего не показывается:(

Автор: smartov 5.11.2008, 16:59

Swatch,

Цитата(Swatch @ 5.11.2008, 14:48

)

а "ProgressBar, который бы показывал процент загрузки интернет-странички" - это не задача?

Нет. Потому что если вам нужно готовое решение - то вам в Центр помощи. А если вы спрашиваете почему у вас не получается - тоу нужно знать что именно не получается. Иначе просто можно было бы писать "код не работает" smile

Swatch, так же если хотите чтобы вам что-то починили - предоставьте код который у вас не работает целиком, пожалуйста.

Автор: Michael.de 5.11.2008, 19:05

Swatch, это (imho) не простая задача. Если начальный "вес" странички нам известен, то чтобы отобразить % придётся выяснять скач. объём с помощью ajax + Java или PHP на сервере (или Flash).
P.S. Может лучше обойтись анимацией (gif или флешка - как на страничке апдейта у майкрософт) и надписью "подождите пару секунд" smile

Автор: MaxWave 5.11.2008, 21:08

я тож так думаю... Прогресс бар загрузки вы где нибудь видели (не флеш) на сайтах?? Просто сделайте обычную анимашку типа Wait please...

Автор: IDVsbruck 6.11.2008, 01:53

Фактически, в полном объеме такую загрузку сделать невозможно.

Объясняется это следующим ... Условно можно разбить весь контент на 4 части: сама страница html (или динамически сформированная, что неважно), css-библиотеки, js-библиотеки и самое крупное - контент страницы - картинки, флешки и прочее статическое наполнение. Получается, что прогресс-бар надо делать в контенте самого окна, следовательно, первая часть для "логгирования" отпадает; частично (в лучшем случае) задействованы css и js, а также кое-какая графика (еслу нужна). Все остальное может подлежать "обработке".

Чтобы знать, сколько %% мы уже скачали, надо знать, сколько надо скачивать всего. Значит, на сервере надо определить все, что подлегает такому анализу при получении.

Только позавчера делал такую штуку, правда, немного схитрил: с учетом того, что мои css и js занимают несоизмеримо меньший объем, чем картинки, я ими пренебрег. Составил на сервере массив из загружаемых картинок, сервер сам определяет объем. Страница помещена в див, который по умолчанию скрыт. На клиенте вывел окошко, отображающее процент загрузки и первым делом отправляю запрос на получение ассоциативного массива с сервера (JSON, в котором определен относительный путь к картинкам и их объем, а также общий объем). В цикле каждому файлу назначаю событие onload (или, есле completed, то сразу добавляю проценты). По мере загрузки файлов проценты растут. Когда объем полученных файлов совпадает с полученым в массиве объемом, произвожу дальнейшие действия - закрываю прогресс-бар и открываю контейнер со страницей.

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

Плюсы такого метода:
- логгирование загрузки, которое можно повернуть себе на пользу, делая страницу как бы "серьезнее";
- пользователь видит всю страницу сразу и в полном объеме;
- показ страницы только в полном объеме, иначе не покажется ничего (нужна ниже подпись, что в случае зависания нажать рефреш)

Минусы:
- нетерпеливым может не понравиться в случае больших объемов, так как кроме процентов ничего не видно; при последующих заходах происходит почти мгновенно;
- динамики нет никакой, так как размер файлов разный, то и скачки разные; как следствие - сначала грузятся очень маленькие картинки, затем большие - если нет в кеше;
- в случае отключенного кеширования картинки на страницы будут грузиться повторно;
- фактически картиной при открытии контейнера нет, но страница при открытии начинает сопоставлять найдненное в кеше с контентом с сервера, следовательно, есть пауза - на выделенке ее практически не наблюдаю (грузится мгновенно), но, возможно, при модемной связи будет ощутимой;
- надо осуществлять допработу на сервере, аккуратно составлять списки картинок и т.д.

Также хочется отметить, что смысла загонять в массив имиджей нет, так как на нормальной страницы с хорошо развитым css картинок-элементов крайне мало (у меня, к примеру, их нет совсем) - в основном все картинки - это бекграунды элементов (дивы, спаны и ссылки). Однако css добавляет картинки по тому же принципу, используя кеш.

Еще думал поставить для заставочки на время загрузки анимированный гиф: сначался дожидался по onload'у его загрузки, затем грузить все остальное. Однако специфика прокручивания анигифа в ИЕ такова, что после прохождения цикла он снова обращается к серверу, как бы подвисая. Вид получается не очень, когда цикл заканчивается и гиф пропадает, а проценты идут. Я не смог этого побороть, поэтому поставил текст и проценты. Думаю, что с вариантом, предложенным выше (заполнение дивов заливкой) получится. Также должен работать и флеш, но лень было вставлять.