Загрузка страницы

← →
js jin (2008-12-10 22:47) [0]

Знаю, конференция "Прочее", может, кто подскажет.
Как на гугль-мэйле сделан "прогрессбар" загрузки? Это слой с классом lpt, который меняет width, и лежит внутри другого слоя. Но код изменения width я не нашел. И как это делается столь точно до конца загрузки?

← →
antonn © (2008-12-10 23:13) [1]

через AJAX рендерится

← →
js jin (2008-12-10 23:14) [2]

А можно чуть поподробнее? ;-)

← →
sniknik © (2008-12-10 23:49) [3]

да без проблем
http://www.google.ru/search?q=AJAX+&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:ru:official&client=firefox-a

← →
sniknik © (2008-12-10 23:52) [4]

кстати, еще бы посоветовал
http://jquery.com/

← →
js jin (2008-12-10 23:56) [5]

Мне не нужны уроки AJAX. Мне нужно понять, как реализована эта фишка. С аяксом я знаком.

← →
DVM © (2008-12-10 23:57) [6]

> Мне нужно понять, как реализована эта фишка

ну так в коде должен быть JavaScript меняющий ширину DIV или чего то там. Чудес не бывает, плохо искал значит.

← →
DVM © (2008-12-10 23:58) [7]

> С аяксом я знаком.

> И как это делается столь точно до конца загрузки?

Значит этот вопрос отпадает.

← →
js jin (2008-12-11 00:02) [8]

> Чудес не бывает, плохо искал значит.

поищи сам на досуге. Найдены переменные lp и pr, но далее раскрутить не могу, даже Firebug"ом

> Значит этот вопрос отпадает.

отнюдь, поясни.

← →
DVM © (2008-12-11 00:04) [9]

> js jin (11.12.08 00:02) [8]

> отнюдь, поясни.

У меня нет гугл мейла, если расскажешь что отображает прогресс может скажу как сделано.

← →
js jin (2008-12-11 00:07) [10]

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

← →
js jin (2008-12-11 00:18) [11]

Параллельно прорабатываю вопрос на одной известной анонимной имиджборде в /s/ , НО покуда не получил вразумительных ответов. Только на хабре встретилась статья, из всего - наиболее удачная.

← →
antonn © (2008-12-11 00:23) [12]

о таких вещас нужно спрашиваться на специализированных форумах - web. например на php.ru, а не в какой то потрепаловке

← →
DVM © (2008-12-11 00:25) [13]

> js jin

Я посмотрел код страницы. Этот прогресс что ли?
<div id="loading"> <div class="cmsg"> <div class="msg"> Загрузка dvmuratov@gmail.com… </div> <div class="lpb"> <div id="lpt"></div> </div> </div>

Более невразумительного кода JavаScript я еще не видел. Срабатывает очевидно тот код JavaScript, что в <body> в нем куча ссылок на внешние скрипты. Код явно не для просмотра человеком генерился.

← →
DVM © (2008-12-11 00:27) [14]

> js jin

Но разобраться можно. Но не сейчас. Честно говоря, проще будет придумать свое решение, чем ковырять этот код, который как через обсфукатор пропущенный.

← →
js jin (2008-12-11 00:28) [15]

Да, место прогресса ты нашел верно, а именно
<div class="lpb"> <div id="lpt"></div> </div>
lpt и меняет ширину. Где это делается - бог весть.

← →
js jin (2008-12-11 00:29) [16]

> как через обсфукатор пропущенный.

так оно и есть.

> js jin

В кратце суть такова:

Ну изменение ширины DIV на JavaScript сделать не сложно. Страница грузится явно через Ajax в фоне, при этом через тот же Ajax получается информация о проценте выполнения, что отображается на индикаторе. После достижения 100% в окно браузера подставляется загруженная страница. Т.е. изначальная страница содержит только код индикатора и код для загрузки полной версии. Как то так.

Завтра может попробую изобразить подобное.

← →
js jin (2008-12-11 00:42) [18]

Я понял это точно так же, как ты. А вот хочу найти момент ПОЛУЧЕНИЯ информации о проценте загрузки.

> А вот хочу найти момент ПОЛУЧЕНИЯ информации о проценте
> загрузки

вот тут кое-что:

http://forum.alfaspace.net/9_4008_0.html

← →
js jin (2008-12-11 01:15) [20]

Хм, интересно...

а посмотрел бы на яваскрип фреймворк ссылку на который я дал, то возможно было бы не только интересно но и уже понятно...

не думаю что гугл использует именно его (есть и другие вроде прототайпа, ...), у гугла скорее что то своё, но для понимания нужен же не конкретный код а принцип...

во всяком случае на приведённом фреймворке написать динамическую загрузку довольно просто, добавить прогресс тоже.
библиотека событийная, начинает работать до загрузки всей страницы, по готовности DOM, дальше даже если первоначально страничка была урезанным шаблоном, её легко достраивать/докачивать динамически. а при динамической закачке узнать процент выполнения, это даже не вопрос, ты же фактически сам её закачиваешь (контролируешь)... и потому сам знаешь что вот этот модуль/часть занимает треть общего объема значит по завершении прогрессу ставится 30%.
ну примерно так.

Загрузка страницы Найти похожие ветки