Форум Flasher.ru

Форум 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)

timoshenkov 15.08.2007 11:27

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

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

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

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

etc 15.08.2007 11:55

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

timoshenkov 15.08.2007 12:12

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

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

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

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

KidsKilla 15.08.2007 13:17

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

timoshenkov 20.08.2007 02:57

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

timoshenkov 20.08.2007 03:49

нашел решение вот пример
 
Нашел как сделать пользуйтесь


Код 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

Psycho Tiger 23.06.2008 12:56

Извиняюсь за некропост, но делать новую тему считаю глупым.
Меня постигла подобная задача, но требуется пропрелоадить отдельное кол-во картинок. Поэтому 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 часа и ничего толкового. Помогите пожалуйста.

KidsKilla 23.06.2008 15:01

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

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


Часовой пояс GMT +4, время: 13:20.

Copyright © 1999-2008 Flasher.ru. All rights reserved.
Работает на vBulletin®. Copyright ©2000 - 2022, Jelsoft Enterprises Ltd. Перевод: zCarot
Администрация сайта не несёт ответственности за любую предоставленную посетителями информацию. Подробнее см. Правила.