Форум Flasher.ru - HTML preloader всей страницы

Форум Flasher.ru (http://www.flasher.ru/forum/index.php)

- HTML/DHTML/CSS/JS/VB (http://www.flasher.ru/forum/forumdisplay.php?f=66)

- - HTML preloader всей страницы (http://www.flasher.ru/forum/showthread.php?t=99871)

HTML preloader всей страницы

подскажите, искал на форуме и в интернете не смог найти
Нужен прелоадер всей страницы
Тоесть пока не загрузились все элементы на странице должен болтаться слой, после загрузки исчезать

Какие проблемы
1. Как корректно скрыть или приглушить все что грузиться на странице?
2. Как корректно узнать что страница и все картинки догрузились?
3. Самое главное как не перебить и не испортить другие события window.onload

Итог
Нужен JS скрипт который акуратно встраиваешь в начало любой своей страницы и он отслеживает загрузку, после этого исчезает

Покажите пример, спасибо

Не надо делать таких прелоадеров. Пользователь должен видеть, как происходит загрузка, а не лицезреть надпись «Загрузка» посреди пустой страницы и, не дождавшись окончания, закрыть окно.

Долго рассказывать, но такой прелоадер нужен, из-за блинный и сложных таблиц поисков
А пока не закроется таблица чатсь документа не отображается, закрывается таблица в конце body

Переверстать сайт нельзя (это если кто посоветовать это решит)

Поэтому нужен JS которые на время загрузки всего HTML будет выводить надпись что процесс идет все нормально, за этим прелоадером пользователь будет видеть что что то рузится на странице

Есть кроссброузерное решение не мешающая другим JS скриптам работать с window.onload ?

jQuery $(document).ready(function(){...}) + Thickbox

спасибо
но не понимаю какую функцию вызывать что бы она скрыла документ а потом показала его :/

нашел решение вот пример

Нашел как сделать пользуйтесь

Код HTML:

<html>

<head>





<script type="text/javascript" src="./javascripts/jquery-latest.pack.js"></script>

<script type="text/javascript" src="./javascripts/jquery.blockUI.js"></script>

<body>



<!-- важно вызывать скрипт из body а не до этого -->

<script type="text/javascript" src="./javascripts/preloader.js"></script>



text page



</body>

</html>

код файла preloader.js

Код HTML:

  $.blockUI('<h1><img src="/images/loading.gif" /> Загрузка ...</h1>'); 

  $(document).ready($.unblockUI);

остальные файлы качаем от сюда

http://malsup.com/jquery/block/#download
http://docs.jquery.com/Downloading_jQuery

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

Сначала рисую хайдер - в цсс у него абсолютная позиция и на весь экран:

Код:

<div class="hider" style="visibility:visible" id="hider">

<table width="100%" height="100%" cellpadding="0" cellspacing="0">

<tr valign="middle">

<td align="center">

<div id="hiderText">

Загрузка...<br />

Пожалуйста, подождите...

</div>

</td>

</tr>

</table>

</div>

Теперь надо загрузить Нн-ое кол-во картинок и после показать сайт.
Делал так:

Код:

var photoArray=new Array(...);

var myI=0;



function loadComplete(){

myI++;

alert("my I="+myI+", photo loaded: "+photoArray[myI]);

if (myI==photoArray.length) alert('Everything loaded!');

}





for (i=0; i<photoArray.length; i++){

//alert("Loading Image #"+myI);

var img=new Image();

img.src=photoArray[i]; 

img.onLoad=loadComplete();

}

Как загрузит HTML выдавал сразу что все картинки загружены, хотя он не загрузил ешё ни 1.
Ок, загрузка всех сразу не работает, пойдем так:

Код:

function loadComplete(){

//alert('Photo loaded'+myI);

myI++;

if (myI<photoArray.length) loadImage();

alert(myI);

//else showSite();

}





function loadImage(){

//alert("Loading Image #"+myI);

var img=new Image();

img.src=photoArray[myI]; 



img.onLoad=loadComplete();

}



loadImage(myI);

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

Цитата:

Начиная с html 4.0 w3c убрал обработчик onLoad для класса Image

Но ведь прелоадеры как то делают - видать это вранье. Вобщем, мучаюсь уже 2.5 часа и ничего толкового. Помогите пожалуйста.

не onLoad а onload. JavaScript регистрозависим.

пс, всё-таки нужно было создать новую тему.