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

**Rostov114** » 19 май 2008, 23:56

Как сделать чтобы во время загруки старницы отображалось небольшое окошко до полной загрузки страницы о том что страница грузится.
Это как я знаю делается на JS ... а его я вообще не знаю.

zk » 20 май 2008, 00:35

Rostov114 писал(а):Это как я знаю делается на JS ... а его я вообще не знаю.

А google тебе на что?

1. Открываем файл index.php шаблона
2. В любом месте между тегами <head> и </head> добавляем код:
Код:

<script type="text/javascript">
function hideLoading() {
document.getElementById('pageIsLoading').style.display = 'none';
}
</script>

3. Сразу после тега <body> добавляем код:
Код:

<div id="pageIsLoading"
style="
position: absolute;
display: block;
padding-left: 44px;
padding-right: 12px;
width: auto;
height: 46px;
line-height: 46px;
border: 1px solid #890000;
color: #000000;
font-weight: bold;
background-color: #e5e5e5;
background-image: url(http://www.абсолютный_путь_к_папке_images/loadingcircle.gif);
background-position: 6px center;
background-repeat: no-repeat;">

<script type="text/javascript">
if (typeof window_width == 'undefined' || typeof window_height == 'undefined') {
var window_width;
var window_height;
if( typeof( window.innerWidth ) == 'number' ) {
window_width = window.innerWidth;
window_height = window.innerHeight;
} else if( document.documentElement &&
( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
window_width = document.documentElement.clientWidth;
window_height = document.documentElement.clientHeight;
} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
window_width = document.body.clientWidth;
window_height = document.body.clientHeight;
}
}
var left = Math.round((window_width - 200) / 2);
var top = Math.round(((window_height - 46) / 3) + 46);
document.getElementById('pageIsLoading').style.left = left+'px';
document.getElementById('pageIsLoading').style.top = top+'px';
</script>
Загружается... Ждите...
</div>

Разумеется, настройки стиля отображения и текста можно изменить на ваш вкус.
4. Непосредственно перед тегом </body> в самом конце файла добавляем код:
Код:

<script type="text/javascript">
if (window.addEventListener) {
window.addEventListener('load', hideLoading, false);
} else if (window.attachEvent) {
var r = window.attachEvent("onload", hideLoading);
} else {
hideLoading();
}
</script>

5. Закидываем прилагаемую картинку в папку images вашего сайта.
6. Тащимся от собственной крутизны...

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

Спёрто отсюда

Мой мнение - такие индикаторы нужны только в тех редких случаях когда нужно выполнить какую либо трудоёмкую операцию =)

**Ivantrs** » 20 май 2008, 17:45

Да, только использовать Ява-скрипт - дурной тон...
У многих Ява вообще нафиг отключена - ибо дырища...
Пишите всё без Явы... и будет вам счастье...

**Rostov114** » 20 май 2008, 20:15

Ivantrs писал(а):Да, только использовать Ява-скрипт - дурной тон...
У многих Ява вообще нафиг отключена - ибо дырища...
Пишите всё без Явы... и будет вам счастье...

Просто пишу админ панель...не для проекта, для себя. И там долго грузится ибо идет подсчет размера каталогов.

zk » 20 май 2008, 21:05

Ivantrs писал(а):Да, только использовать Ява-скрипт - дурной тон...
У многих Ява вообще нафиг отключена - ибо дырища...
Пишите всё без Явы... и будет вам счастье...

Ты отстал от жизни года на 3-4.

Rostov114 писал(а):И там долго грузится ибо идет подсчет размера каталогов.

Такие вещи лучше писать с использованием AJAX, в этом случае можно будет реализовать прогрессбар отображающий процесс подсчёта.

**Alexsandrit** » 03 июн 2008, 19:43

может кто-нибудь поможет реализовать прогрессбар отображающий процесс загрузки файла, как на народ-диске? Вот файлики: c яndexa

zk » 03 июн 2008, 22:26

Alexsandrit писал(а):может кто-нибудь поможет реализовать прогрессбар отображающий процесс загрузки файла

Прогресс загрузки файла можно реализовать двумя способами:
1й простои и распространённый это через флеш, и он к аяксу отношения не имеет, например - http://swfupload.org/
2й - на уровне PHP с использованием AJAX

На уровне PHP можно реализовать например с помощью расширений php_uploadprogress или APC, входящих в состав стандартных расширений PECL (скачать).

Пример использования php_uploadprogress есть здесь - http://phpdevils.com/blog/development/p ... adprogress

Небольшой пример как это организовать с помощью APC есть тут - http://www.habrahabr.ru/blog/webdev/32591.html

**Alexsandrit** » 08 янв 2009, 23:54

Код: Выделить всё • Развернуть

   function letter(letter, page)
   {
      document.getElementById("blocker").style.visibility = 'visible';
      document.getElementById("blocker_mess").style.visibility = 'visible';
         document.getElementById("giraffe").style.visibility = 'hidden';
                    document.getElementById("blocker_mess").style.visibility = 'hidden';

      microAjax ('http://<?echo $hostnames;?>/efronletter.php?letter=' + letter + '&page=' + page , function(response) { document.getElementById ('giraffe_calendar').innerHTML = response;});      
      return false;
document.getElementById("blocker").style.visibility = 'hidden';


   }

вопрос вот в чём : почему при выполнении этой функции прогресс появляется а потом не убирается что не так в document.getElementById("blocker").style.visibility = 'hidden'; ?

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

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

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

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

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

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

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

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

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

Кто сейчас на конференции