|
Я не так давно постил в такой же теме на Винграде, поэтому извините, придумывать заново не буду - просто скопипастю свой пост оттуда:
Фактически, в полном объеме такую загрузку сделать невозможно.
Объясняется это следующим ... Условно можно разбить весь контент на 4 части: сама страница html (или динамически сформированная, что неважно), css-библиотеки, js-библиотеки и самое крупное - контент страницы - картинки, флешки и прочее статическое наполнение. Получается, что прогресс-бар надо делать в контенте самого окна, следовательно, первая часть для "логгирования" отпадает; частично (в лучшем случае) задействованы css и js, а также кое-какая графика (еслу нужна). Все остальное может подлежать "обработке".
Чтобы знать, сколько %% мы уже скачали, надо знать, сколько надо скачивать всего. Значит, на сервере надо определить все, что подлегает такому анализу при получении.
Только позавчера делал такую штуку, правда, немного схитрил: с учетом того, что мои css и js занимают несоизмеримо меньший объем, чем картинки, я ими пренебрег. Составил на сервере массив из загружаемых картинок, сервер сам определяет объем. Страница помещена в див, который по умолчанию скрыт. На клиенте вывел окошко, отображающее процент загрузки и первым делом отправляю запрос на получение ассоциативного массива с сервера (JSON, в котором определен относительный путь к картинкам и их объем, а также общий объем). В цикле каждому файлу назначаю событие onload (или, если completed, то сразу добавляю проценты). По мере загрузки файлов проценты растут. Когда объем полученных файлов совпадает с полученым в массиве объемом, произвожу дальнейшие действия - закрываю прогресс-бар и открываю контейнер со страницей.
Если честно, то делал, пробуя одну штуку, не надеясь на нормальный результат. А получилась совершенно безотказная штука. Естественно, при рефреше страницы отображение прогресс-бара происходит мгновенно.
Плюсы такого метода:
- логгирование загрузки, которое можно повернуть себе на пользу, делая страницу как бы "серьезнее";
- пользователь видит всю страницу сразу и в полном объеме;
- показ страницы только в полном объеме, иначе не покажется ничего (нужна ниже подпись, что в случае зависания нажать рефреш)
Минусы:
- нетерпеливым может не понравиться в случае больших объемов, так как кроме процентов ничего не видно; при последующих заходах происходит почти мгновенно;
- динамики нет никакой, так как размер файлов разный, то и скачки разные; как следствие - сначала грузятся очень маленькие картинки, затем большие - если нет в кеше;
- в случае отключенного кеширования картинки на страницы будут грузиться повторно;
- фактически картинок при открытии контейнера нет, но страница при открытии начинает сопоставлять найдненное в кеше с контентом с сервера, следовательно, есть пауза - на выделенке ее практически не наблюдаю (грузится мгновенно), но, возможно, при модемной связи будет ощутимой;
- надо осуществлять допработу на сервере, аккуратно составлять списки картинок и т.д.
Также хочется отметить, что смысла загонять в массив имиджей нет, так как на нормальной страницы с хорошо развитым css картинок-элементов крайне мало (у меня, к примеру, их нет совсем) - в основном все картинки - это бекграунды элементов (дивы, спаны и ссылки). Однако css добавляет картинки по тому же принципу, используя кеш.
Еще думал поставить для заставочки на время загрузки анимированный гиф: сначался дожидался по onload'у его загрузки, затем грузить все остальное. Однако специфика прокручивания анигифа в ИЕ такова, что после прохождения цикла он снова обращается к серверу, как бы подвисая. Вид получается не очень, когда цикл заканчивается и гиф пропадает, а проценты идут. Я не смог этого побороть, поэтому поставил текст и проценты. Думаю, что с вариантом, предложенным выше (заполнение дивов заливкой) получится. Также должен работать и флеш, но лень было вставлять.
|
