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

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

Форум программистов > JavaScript: Общие вопросы > предварительная загрузка

Автор: 6o6pbI 26.9.2007, 22:00

Здравствуйте.
Нужна такая вещь,когда человек заходит на сайт должна появляться страничка

...подождите идет загрузка...

а когда нужная страница полностью загрузилась,то осуществляется переход на нее.

пример можно посмотреть на woweb и вообще много таких сайтов.
Научите пожалуйста!!
Заранее спасибо!!!

Автор: Aoli 26.9.2007, 22:40

Внутри html кода пишется джава скрипт, на событие onload.
Примеры посмотри в коде страниц этих же сайтов.

Автор: 6o6pbI 26.9.2007, 23:04

в том то и дело что они прячут javascript в отдельном файле!!! :(

Автор: nornad 27.9.2007, 00:32

6o6pbI, а самому написать не судьба?
Или ты хочешь чтобы тебе просто код дали готовый?

Добавлено через 3 минуты и 12 секунд
Да и отдельный файлик скрипта посмотреть тоже за нефиг делать - сохрани страницу полностью или открой свойства страницы и глянь на скрипты.

Автор: 6o6pbI 27.9.2007, 09:10

Я бы с радостью написал сам,но я новичек в этом нелегком деле!!!
Нет,я не прошу готовый скрипт,я прошу объяснить мне как это работает.А ответ типа пользуйся функцией onLoad(); и все будет ок,для меня не нисут никакой информации в силу моего малого знания о javascript.
Про наличие этой функции я знаю,а как ей пользоваться нет,вот и прошу помощи.

Автор: dsCode 27.9.2007, 10:47

Aoli,

Цитата(Aoli @ 26.9.2007, 22:40

)

на событие onload

а разве onLoad наступает не тогда, когда страница полностью загружена уже (включая картинки)? ;)

6o6pbI, примерно, суть в следующем:

1. страница разбивается на равные части (исходя из контента; контент скрыт в div'e) (допустим 10 частей)

2. после каждой части вставляется вызов функции js, которая "продвигает" индикатор загрузки (который находится в отдельном, абсолютно-спозиционированном div'e) на 10%.

3. После последней части функция скрывает div загрузки и показывает основной div с контентом.

Автор: InfMag 27.9.2007, 11:00

Вот тебе пример smile

все очень просто

Код


<html>
<head>
<title>page</title>
</head>
<body onload="pageloading.style.display='none';pageload.style.display='block';">
<div id='pageloading'>...LOADING...</div>
<div id='pageload' style="display:none">OK...</div>
</body>
</html>

Автор: 6o6pbI 27.9.2007, 12:22

Вот оно!!!
Спасибо за хорошие ответы!!
Но я уже разобрался почти. реализовал я так...

Код


<script>
var shag=8;
var url_text='Группа ТМ-1-05';
var url_text_style='style="color:#00000"';
var ok_log='Загрузка завершена'; 
var text_log='Загружаюсь...';
var log_color='#ffffff';
var log_win_color='white';
var border_log='#4D5764'; //цвет оконтовки
var bar_color='#4D5764'; //цвет полосы загрузки
var text_style='style="color:#005A89"'; // стиль для всего текста


var var_log=0;
document.write('<div id="log_bar"><table width="100%" height="100%"><tr><th align="center"><table cellspacing="0" style="border:solid 1px '+border_log+'" bgcolor="'+log_win_color+'"  align="center" width="333"><tr ><th bgcolor="'+border_log+'" colspan="3" '+url_text_style+' >'+url_text+'</th></tr><tr><th '+text_style+' colspan="3">'+text_log+'</th></tr><tr><td '+text_style+'><b>0%</b></td><td width="100%"><hr width="1" id="log_hr" align="left" size="10" noshade color="'+bar_color+'"></td><td '+text_style+'><b>100%</b></td></tr><tr><th colspan="3" id="procent" '+text_style+'>0%</th></tr></table></th></tr></table></div><div id="temp_loading" style="display:none">');

function vis_log()
{ 
    document.getElementById('log_bar').style.display='none';
    document.getElementById('temp_loading').style.display='block';
    clearTimeout(tim);}

function lo()
{ 
    var_log+=shag;
    if(var_log<=100)
{
    document.getElementById('log_hr').width=var_log+"%";
    document.getElementById('procent').innerHTML=var_log+" %" 
} 
else
{ 
    document.getElementById('procent').innerHTML=ok_log;
    tim=setTimeout("vis_log();",0)
}
}
</script>

каждой картинке написал onload="lo();";
и все работает(почти!!!!)
Вот она проблемма!!! В опере не работает!!!!Почему???????
Не исчезает див загрузки!!!!к стати та же проблемма и с этим простым кодом

Код


<html>
<head>
<title>page</title>
</head>
<body onload="pageloading.style.display='none';pageload.style.display='block';">
<div id='pageloading'>...LOADING...</div>
<div id='pageload' style="display:none">OK...</div>
</body>
</html>

Подскажите кто знает пожалуйста.

Автор: dsCode 27.9.2007, 12:33

InfMag,

Цитата(InfMag @ 27.9.2007, 11:00

)

все очень просто

еще раз повторю - onload для body наступит, когда документ загрузится полностью

6o6pbI, все должно сработать. document.getElementById('log_bar').style.display='none'; - у Вас определен элемент с id log_bar (это скрипт с woweb - у них-то, может и определен этот элемент, а Вы не забыли написать?)? Потмоу что функция vis_log() должна вызваться после отработки последней lo(...) - tim=setTimeout("vis_log();",0).

Автор: 6o6pbI 27.9.2007, 12:48

6o6pbI, все должно сработать. document.getElementById('log_bar').style.display='none'; - у Вас определен элемент с id log_bar (это скрипт с woweb - у них-то, может и определен этот элемент, а Вы не забыли написать?)? Потмоу что функция vis_log() должна вызваться после отработки последней lo(...) - tim=setTimeout("vis_log();",0).

Все правильно сделал.В других браузерах работает ведь!!!!А в опере нет.

У меня 12 картинок у каждой onload="lo();"
шаг=8

функция lo(); повторяется 12 раз,при этом var_log становится > 100 и запускается function vis_log();

Проблемма в том что в опере даже первый шаг не делается.

Вот ссылка где пытаюсь реализовать http://www.tm-1-05.jino-net.ru/

Автор: dsCode 27.9.2007, 16:02

6o6pbI, не знаю, сходу так не сказать. Что написано в описании к скрипту? Он поддерживает Оперу вообще? На самом деле, когда происходит document.write(...) в самом конце создается невидимый див, но вот закрывающего тега для него нет. Может из-за этого - хотя вряд ли, конечно. В общем, надо пошагово отлаживать и искать причину.

P.S.: вообще, пощелкайте по своим же ссылкам (форум, вход и т.д.) - переодически файрбаг говорит "lo() is not defined, tim is not defined.. и т.д.". Так что там ошибки есть - надо искать и фиксить.

Автор: SelenIT 27.9.2007, 16:12

6o6pbI, просто не все браузеры делают из id-ов глобальные переменные. Если пользоваться стандартным методом document.getElementById, будет работать везде:

Код


<html>
<head>
<title>page</title>
</head>
<body onload="var d=document;d.getElementById('pageloading').style.display='none';d.getElementById('pageload').style.display='block';">
<div id='pageloading'>...LOADING...</div>
<div id='pageload' style="display:none">OK...</div>
</body>
</html>

Автор: 6o6pbI 27.9.2007, 16:33

dsCode не поверишь!!!Реально из за незакрытого дива нничего не работало!!!!!!!!! smile

У меня там все через getElementById.
Спасибо всем кто потратил на меня время!!! smile

Автор: Astraller 29.9.2007, 16:08

Ужос.... решение елементарное и лежит на поверхности.

Код


window.onload=show;
function show (){
[создали и показали DIV]
time();
}

function time(){
if (document.body){
[скрыли див]
}else{
setTimeout("time();",1);
}
}

Автор: SelenIT 30.9.2007, 16:27

Astraller, и чем это элементарнее, чем пример InfMagа выше? smile

К тому, же, не поздновато ли только создавать див-прелоудер в момент onload-а - т.е. тогда, когда по логике должна открыться основная страница?

Автор: AKS 30.9.2007, 17:14

Цитата(SelenIT @ 30.9.2007, 16:27

)

Astraller, и чем это элементарнее, чем пример InfMagа выше?

Своя рубашка ближе к телу. smile

Автор: dsCode 30.9.2007, 20:54

Astraller, AKS, да это не индикатор загрузки получится, а просто эффект "Загрузка данных..." "моргнет" и исчезнет, когда страница уже будет загружена полностью. onLoad наступит, когда ВСЕ загрузится (попробуйте картинку в метров 5 запихнуть в код и поставить alert(...) в onLoad - этот алерт появится, когда картинка загружена будет уже).

Автор: 6o6pbI 30.9.2007, 22:37

Автор: AKS 1.10.2007, 08:50

Цитата(dsCode @ 30.9.2007, 20:54

)

AKS, да это не индикатор загрузки получится...

А я тут при чем? ))))))))))))))))))))))))))))))))
Я тут, грубо говоря, только offtop'ил (да и то один только раз)...

Автор: dsCode 1.10.2007, 11:18

AKS, а-а )) пардон, просто мне показалось, что ты поддержал идею с onLoad'ом, говоря о "рубашке" =))

Автор: cruelangel 1.10.2007, 11:52

> пример можно посмотреть на woweb и вообще много таких
быдло-сайтов. думаешь посетителю интересно смотреть на твоё "пожалуйста, подождите"?

Автор: dsCode 1.10.2007, 12:28

Цитата(cruelangel @ 1.10.2007, 11:52

)

думаешь посетителю интересно смотреть на твоё "пожалуйста, подождите"?

кстати, да, особенно было на dial-up'e - когда, текст прогрузится, а картинки нафиг не нужны, я останавливал загрузку (можно, конечно, вообще было отключить картинки в браузере, но это уже другой вопрос) - часть информации, которая мне нужна - уже загружена. А с такими "индикаторами загрузки" пользователю придется ждать полной загрузки. Хотя, все это можно гибко настроить, например, скрывать основной див, пока грузятся важные части, потом показать основной див, а "ненужная часть" будет подргужаться дальше сама по себе. Но юзер уже сможет работать. Хотя толку тогда от этого "индикатора загрузки"?

Автор: Astraller 1.10.2007, 12:53

Цитата(dsCode @ 30.9.2007, 20:54)

А вы проверяли? smile

window.onload наступит сразу же при появлении окна smile

а document.body станет доступно когда догрузится! smile

Автор: SelenIT 1.10.2007, 13:08

Цитата(Astraller @ 1.10.2007, 12:53

)

window.onload наступит сразу же при появлении окна

Astraller, это в каком браузере и в каком режиме? Можно полный пример?

Автор: Astraller 1.10.2007, 13:21

Цитата(SelenIT @ 1.10.2007, 13:08)

Цитата(Astraller @ 1.10.2007, 12:53

)

window.onload наступит сразу же при появлении окна

Astraller, это в каком браузере и в каком режиме? Можно полный пример?

Всё . Беру свои слова в зад smile

Так не получится.
1) window.onload срабатывает после загрузки <head> только в FF 2.0.0.6+
2) Некуда крепить созданный нами слой т.к. document.body еще не догрузился.

PS Тогда вижу только одно решение. Поверх всех слоёв выводим этот слой загрузки в самом начале а после догрузки его скрываем. ИМХО

Автор: InfMag 12.12.2007, 13:09

Ну вобще можно очень и очень хитрожопо поступить smile

Код


<html>
<head>
<title>page</title>
</head>
<body>
<div id='pageloading'>...LOADING...</div>
<div id='pageload' style="display:none">OK...</div>
</body>
</html>
<script type="text/javascript" language="javascript">pageloading.style.display='none';pageload.style.display='block';</script>

Тогда стопудов пока до последней строчки не дойдет нифига не покажется smile

Автор: dsCode 12.12.2007, 15:39

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