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

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

Форум программистов > Вёрстка веб-сайтов > Как сделать Loader?

Автор: PosiTive 31.12.2006, 12:56

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

Буду благодарен полноценным ответам.

P.S: всех с новым годом smile

Автор: pythonwin 3.1.2007, 15:12

думаю рисунок-бегунок - это div с gif внутри, а страничка загружается через AJAX

Автор: Vaulter 3.1.2007, 19:07

почему gif? почему рисунок?
все в ч.б. можно smile

процентики и т.д.

Автор: pythonwin 4.1.2007, 12:14

Цитата(Vaulter @ 3.1.2007, 22:07

)

почему gif? почему рисунок?

ну можно и текст...
это можно спросить у модераторов JS - на форуме эта мулька реализована

Автор: Nicholas_S 4.1.2007, 14:32

На форуме это gif-картинка, причем без процентов.
Обычно назначение такой фишки то, чтобы показать пользователю, что "браузер работает, ждите". Проценты здесь лишние имхо, ибо первые 10 могу загружаться 10 секунд, а последние 90 - мгновенно.

Автор: 3x3 5.1.2007, 02:47

Цитата(Nicholas_S @ 4.1.2007, 14:32)

Не только картинка:

Код


<span style="display: none;" id="ajax_w"><b>Загрузка. Пожалуйста,<br />подождите...</b><br /><br /><img src="/style_images/2/l_ajax.gif" alt=""/></span>

Автор: LesnoyChelovek 5.1.2007, 05:37

А на многих сайтах это вообще с помошью Флэш технологий сделано. Вот!

Автор: Wolf1994 5.1.2007, 11:08

Цитата(PosiTive @ 31.12.2006, 12:56

)

Вопрос как реализовывается подсчет процентов загрузки и погружение страницы в буфер!

Можно сделать так:

1. Определяем UserAgent - если он не относится к поисковому боту, то все ссылки направляем на скрытый ифрэйм специальному скрипту.
2. Этот скрипт выдаёт JS, который выводит в родительском документе строку загрузки - она может содержаться там изначально и выводиться сменой аттрибутов свойства display.
3. Серверный скрипт генерирует страницу, отслеживая выполняемые операции и соответствующие им значения загрузки в процентах, обновляя через JavaScript статус бара.
4. Сформированная страница грузится через innerHTML в тело основного документа.

Автор: pythonwin 5.1.2007, 11:19

Цитата(Wolf1994 @ 5.1.2007, 14:08

)

4. Сформированная страница грузится через innerHTML в тело основного документа.

почему не DOM ?
я не против innerHTML.

Автор: Wolf1994 5.1.2007, 11:31

Цитата(pythonwin @ 5.1.2007, 11:19

)

почему не DOM ?

А чем "Dynamic Object Model" лучше? Я не владею вопросом и привёл своё решение...

Автор: pythonwin 5.1.2007, 12:03

Цитата(Wolf1994 @ 5.1.2007, 14:31

)

А чем "Dynamic Object Model" лучше? Я не владею вопросом и привёл своё решение...

++1

просто кто-то использует innerHTML, а кто-то больше любит DOM - её легче и более красиво совмещать с ООП на сервере - можно сильно сократить код и в тоже время сделать его очень читабельным.
Но это дело вкуса - сам для маленьких задач использую innerHTML, но это не значит, что на большее innerHTML не способен.

Автор: PosiTive 5.1.2007, 20:47

а кто-нибудь знает как просчитать проценты загрузки страницы?

Автор: Wolf1994 5.1.2007, 21:24

Самое простое - это вместо приведённого мной 3-его пункта, сделать:

- заранее

Код


$pagesize=sizeof (file ("page.html"));

- и потом при выполнении скрипта:

Код


fopen ("page.html", "r");
$c=0;
while ( !feof ($fp) )
{
 $content.=fgets ($fp);
 $c++;
 $progress=($c/$pagesize)*100;
 //и средствами JS отображать значение $progress в родительском окне.
 //после чего вставить через innerHTML в "родителя" $content
}
fclose ($fp);

- минус, если страница отдаётся неровно, будет неровным прогрессс загрузки.

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

P.S. Чистая теория...

Автор: PosiTive 7.1.2007, 06:02

Wolf1994, спасибо. буду пробовать.