Помню, что как-то раз мне достался очень сложный макет, совсем не заточенный для верстания, который нужно было сделать, естественно, резиновым. Хотя к тому времени я уже был очень неплохим верстальщиком, сайт оказался довольно сложным в плане вёрстки.
Сайт был разрезан на довольно крупные части, т.е. он был богат графикой, что уже увеличивало время загрузки страницы. Впоследствии сайт был обогащён флэшом и скриптами.
Результат был таков - пока страница грузится (скорость соединения 1 или 2 мбит была), все элементы непонятно где находятся, вылезают какие-то отвратительные баги, и всё на глазах пользователя. Тогда-то и было принято решение, что нужен скрипт предзагрузки страницы: пока сайт грузится, пользователь видит красивое окошко, где ему что-то показывается.
Поскольку даже сейчас очень много где сидят не на высокоскоростных линиях (по моим соображениям не только глубинка России, но и почти вся Белоруссия - там у них с интернетом бидэ), то об этом методе стоит написать.
Теория
Итак, у нас в HTML есть два слоя - в то время когда один открыт (id="load"), другой должен быть скрыт (id="total"). Потом, когда контент в скрытом слое (id="total") загрузится, то должна произвестись замена - невидимый (id="load") становится видимым, а видимый (id="total") - невидимым. Замена производится на JavaScript. Итак…
Практика
Скрипт замены на JS, которая скрывает и показывает нужные слои. При желании, его можно вынести в отдельный файл и подключить. Либо просто в шапке его положить.
var check_preload;
function preload_page() {
if(check_preload) {
document.getElementById("total").style.visibility = "visible";
document.getElementById("load").style.visibility = "hidden";
}
}
</script>
Далее, код CSS.
#total {
visibility: hidden;
}
#load {
position: absolute;
left: 50%;
top: 50%;
width: 300px;
height: 150px;
margin: -100px 0 0 -150px;
border: 1px solid black;
padding: 100px 10px 10px 10px;
background: #ffffee;
text-align: center;
font-weight: bold;
font-size: 17px;
color: #006401;
}
</style>
И наконец код, который должен содержаться в боди
<div id="load">Пожалуйста, подождите,<br>идёт загрузка...</div>
<div id="total">
Содержание страницы
</div>
<script type="text/javascript">
check_preload=1;
</script>
</body>
Функция preload_page загружается через событие onLoad и проверяет была ли инициирована переменная check_preload и если да, то производит операции над слоями (ведь вы всегда помните, что 1 - это true, а 0 - это false?).
В завершение
Вот и всё. А недостаток у скрипта только один - если в браузере отключён javascript, то пользователь рискует увидеть только слой с блоком предзагрузки. Но выход из этого есть.
К примеру, можно создать две версии страницы, с предзагрузкой и без, и там где с предзагрузкой в самом низу мелкими буквами написать, что-то типа "если вы видите это окно более 20 секунд, то пройдите по ссылке".
Или, не создавая второй страницы, написать внизу также мелко, что если вы долго видите это окно, то скорее всего у вас отключен JavaScript, и написать то, что его необходимо включить, дав при этом ссылки на инструкции для различных браузеров. Думаю этот вариант более предпочтительный, т.к. ни один современный сайт в интернете не обходится без js.
И напоследок картинку для поднятия настроения =).
(голосов: 3, средний: 4.00 из 5)Похожие записи:
- Как показать и скрыть текст на JavaScript
- Как определить "разрешение экрана" и "размер окна браузера" на JavaScript и jQuery
- Скрипт меню с контентом “почти как флэш” своими руками. Часть 2. Программирование.
- Как сделать кнопку "наверх" как вКонтакте
- Как запретить выделение контента в браузерах, универсальное решение
Загрузка ...
09/07/2010 at 16:39 Постоянная ссылка Цитировать
респект за картинку ! самый дорогой и дешёвый вариант именно так и предлагают. xD
09/07/2010 at 17:46 Постоянная ссылка Цитировать
ага! именно так, мне тоже понравилось =)
11/07/2010 at 10:24 Постоянная ссылка Цитировать
Спасибо за пост, то что искал!
15/07/2010 at 12:21 Постоянная ссылка Цитировать
Всегда пожалуйста =)
03/11/2010 at 20:49 Постоянная ссылка Цитировать
Только у меня такая проблема: при использавание этого скрипта, не работает ни форма входа, ни мини-чат.
03/11/2010 at 21:31 Постоянная ссылка Цитировать
ну, надо смотреть что и как.
04/11/2010 at 6:48 Постоянная ссылка Цитировать
Вот не работало, убрал код, заработало. Сейчас специально поставлю код и дам ссылку, чат работать не будет =)
04/11/2010 at 7:58 Постоянная ссылка Цитировать
Извини, сейчас нашел маленькую ошибку и все работает =)
04/11/2010 at 8:40 Постоянная ссылка Цитировать
вот про это я и говорил
04/11/2010 at 8:58 Постоянная ссылка Цитировать
Извини конечно, но хотел бы тебя попросить, когда будет время глянь суда: там есть мини-чат вот как сделать, что бы при нажатии кнопки вызова этого самого чата, фон страницы затемнялся, т.е. внимание пользователя фокусировалось на чате.
Зарание благодарен.
04/11/2010 at 9:23 Постоянная ссылка Цитировать
ну, надо к кнопке вызова чата к событию онклик добавить функцию, чтобы окно чата было на переднем плане, а содержание сайта затемнялось. нужно,чтобы по клику появлялся полупрозрачный контейнер по высоте и ширине сайта, который лежит выше всего содержания, но не выше окна чата (регулируешь через z-index)
04/11/2010 at 9:30 Постоянная ссылка Цитировать
Блигодарю, пыпытась осуществить
10/11/2010 at 9:43 Постоянная ссылка Цитировать
Подскажи, как сделать наоборот – есть форма, если все поля правильные она отсылает письмо, и вот во время отсылки чтобы был значок ожидания, а затем открывалась страница что все ок.
10/11/2010 at 14:06 Постоянная ссылка Цитировать
нужно, чтобы без перезагрузки страницы на аяксе посылался запрос. читай статью
10/11/2010 at 14:16 Постоянная ссылка Цитировать
Спасибо.
но есть одна закавыка – у меня сайт на win1251, поэтому вылезают в форме вопросики, он передает в utf-8. да и саму форму не надо проверять – я php проверил данные и отфильтровал. потом форма письмо через гугл отправляет гдето 1 секунду – вот в этот момент и включить бы картинку – запрос выполняется – ждите… а то сейчас нетерпеливые жмут по несколько раз – столько писем и приходит
11/11/2010 at 13:22 Постоянная ссылка Цитировать
поиграйся с кодировками в метатегах и кодировками тупо файлов
проверка жабы не лишняя. а чтобы два раза не нажимали, сделай, чтобы после нажатия клавиша становилась неработающей. как продолжение – получаешь ответ от сервера и ставишь обратно кнопку включённой. jQuery Form в помощь
16/08/2011 at 14:34 Постоянная ссылка Цитировать
Спасибо за пост.
Александр, а вы не пробовали затачивать предзагрузку под cms, например wordpress?
Мне понравилась на сайте bel-ros.ru . Пытаюсь разобраться, но пока результаты особо не радуют.)
16/08/2011 at 14:56 Постоянная ссылка Цитировать
Пожалуйста!
Так тут нечего встраивать практически, считай изменения в шаблон внести и всё.
А вообще по цмс-кам я думал раздел открыть, но пока руки не доходят=)
29/12/2011 at 18:10 Постоянная ссылка Цитировать
Код работает отлично. Но когда подгружается страница появляется полоса прокрутки и крутанув скролл текст исчезает вверху странички.
Предложение имею…
position: absolute;
заменить на
position: fixed;
Тогда div #load будет висеть всегда в центре страницы…
29/12/2011 at 21:41 Постоянная ссылка Цитировать
ммм, хорошее решение.
также, кстати, можно использовать не visibility, а display, тогда контент не будет появляться и скроллбаров, собственно, тоже
30/12/2011 at 11:27 Постоянная ссылка Цитировать
Заменил в скрипте visibility на display и основной контент вообще перестал показываться.
Заменил в CSS – окошко прелоада показывается и видно как подгружаются данные из total…
30/12/2011 at 21:15 Постоянная ссылка Цитировать
в лоб не поменять, надо менять немного сам скрипт =)
31/12/2011 at 3:01 Постоянная ссылка Цитировать
к сожалению я в этом не силён… могу нормально с html разобраться. или видео смонтировать. а программирование это не моё…
31/12/2011 at 10:36 Постоянная ссылка Цитировать
я бы с радостью помог, но сейчас в свете новогодней канители сильно ограничен по свободному времени. может быть потом доберусь и перепишу таки скрипт для дисплея…