Форум Flasher.ru
Ближайшие курсы в Школе RealTime
Список интенсивных курсов: [см.]  
  
Специальные предложения: [см.]  
  
 
Блоги Правила Справка Пользователи Календарь Поиск рулит! Сообщения за день Все разделы прочитаны
 

Вернуться   Форум Flasher.ru > Работа над сайтом > HTML/DHTML/CSS/JS/VB

Версия для печати  Отправить по электронной почте    « Предыдущая тема | Следующая тема »  
Опции темы Опции просмотра
 
Создать новую тему Ответ
Старый 15.08.2007, 11:27
timoshenkov вне форума Посмотреть профиль Отправить личное сообщение для timoshenkov Посетить домашнюю страницу timoshenkov Найти все сообщения от timoshenkov
  № 1  
Ответить с цитированием
timoshenkov
 
Аватар для timoshenkov

Регистрация: Feb 2002
Адрес: spb
Сообщений: 149
Cool HTML preloader всей страницы

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

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

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

Покажите пример, спасибо
__________________
Благодарю за чтение, мужчины и женщины.

Старый 15.08.2007, 11:55
etc вне форума Посмотреть профиль Найти все сообщения от etc
  № 2  
Ответить с цитированием
etc
Et cetera
 
Аватар для etc

Регистрация: Sep 2002
Сообщений: 30,784
Не надо делать таких прелоадеров. Пользователь должен видеть, как происходит загрузка, а не лицезреть надпись «Загрузка» посреди пустой страницы и, не дождавшись окончания, закрыть окно.

Старый 15.08.2007, 12:12
timoshenkov вне форума Посмотреть профиль Отправить личное сообщение для timoshenkov Посетить домашнюю страницу timoshenkov Найти все сообщения от timoshenkov
  № 3  
Ответить с цитированием
timoshenkov
 
Аватар для timoshenkov

Регистрация: Feb 2002
Адрес: spb
Сообщений: 149
Долго рассказывать, но такой прелоадер нужен, из-за блинный и сложных таблиц поисков
А пока не закроется таблица чатсь документа не отображается, закрывается таблица в конце body

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

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

Есть кроссброузерное решение не мешающая другим JS скриптам работать с window.onload ?
__________________
Благодарю за чтение, мужчины и женщины.

Старый 15.08.2007, 13:17
KidsKilla вне форума Посмотреть профиль Отправить личное сообщение для KidsKilla Посетить домашнюю страницу KidsKilla Найти все сообщения от KidsKilla
  № 4  
Ответить с цитированием
KidsKilla
.grin! wuz here
 
Аватар для KidsKilla

Регистрация: Aug 2004
Адрес: paradise city
Сообщений: 3,981
Отправить сообщение для KidsKilla с помощью ICQ
jQuery $(document).ready(function(){...}) + Thickbox
__________________
Breakcore them all!

Старый 20.08.2007, 02:57
timoshenkov вне форума Посмотреть профиль Отправить личное сообщение для timoshenkov Посетить домашнюю страницу timoshenkov Найти все сообщения от timoshenkov
  № 5  
Ответить с цитированием
timoshenkov
 
Аватар для timoshenkov

Регистрация: Feb 2002
Адрес: spb
Сообщений: 149
спасибо
но не понимаю какую функцию вызывать что бы она скрыла документ а потом показала его :/
__________________
Благодарю за чтение, мужчины и женщины.

Старый 20.08.2007, 03:49
timoshenkov вне форума Посмотреть профиль Отправить личное сообщение для timoshenkov Посетить домашнюю страницу timoshenkov Найти все сообщения от timoshenkov
  № 6  
Ответить с цитированием
timoshenkov
 
Аватар для timoshenkov

Регистрация: Feb 2002
Адрес: spb
Сообщений: 149
По умолчанию нашел решение вот пример

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


Код 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
__________________
Благодарю за чтение, мужчины и женщины.

Старый 23.06.2008, 12:56
Psycho Tiger вне форума Посмотреть профиль Отправить личное сообщение для Psycho Tiger Найти все сообщения от Psycho Tiger
  № 7  
Ответить с цитированием
Psycho Tiger
 
Аватар для Psycho Tiger

блогер
Регистрация: Jun 2005
Адрес: Господи пожалуйста не Новосибирск
Сообщений: 6,598
Записей в блоге: 17
Извиняюсь за некропост, но делать новую тему считаю глупым.
Меня постигла подобная задача, но требуется пропрелоадить отдельное кол-во картинок. Поэтому 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 часа и ничего толкового. Помогите пожалуйста.

Старый 23.06.2008, 15:01
KidsKilla вне форума Посмотреть профиль Отправить личное сообщение для KidsKilla Посетить домашнюю страницу KidsKilla Найти все сообщения от KidsKilla
  № 8  
Ответить с цитированием
KidsKilla
.grin! wuz here
 
Аватар для KidsKilla

Регистрация: Aug 2004
Адрес: paradise city
Сообщений: 3,981
Отправить сообщение для KidsKilla с помощью ICQ
не onLoad а onload. JavaScript регистрозависим.

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

Создать новую тему Ответ Часовой пояс GMT +4, время: 18:43.
Быстрый переход
  « Предыдущая тема | Следующая тема »  
Опции темы
Опции просмотра

Ваши права в разделе
Вы не можете создавать новые темы
Вы не можете отвечать в темах
Вы не можете прикреплять вложения
Вы не можете редактировать свои сообщения

BB коды Вкл.
Смайлы Вкл.
[IMG] код Вкл.
HTML код Выкл.


 


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


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