"Как скрасить время ожидания пользователя" или "Предварительная загрузка страницы"

« Предыдущая запись
 
  Следующая запись »
 

Помню, что как-то раз мне достался очень сложный макет, совсем не заточенный для верстания, который нужно было сделать, естественно, резиновым. Хотя к тому времени я уже был очень неплохим верстальщиком, сайт оказался довольно сложным в плане вёрстки.

Сайт был разрезан на довольно крупные части, т.е. он был богат графикой, что уже увеличивало время загрузки страницы. Впоследствии сайт был обогащён флэшом и скриптами.

Результат был таков - пока страница грузится (скорость соединения 1 или 2 мбит была), все элементы непонятно где находятся, вылезают какие-то отвратительные баги, и всё на глазах пользователя. Тогда-то и было принято решение, что нужен скрипт предзагрузки страницы: пока сайт грузится, пользователь видит красивое окошко, где ему что-то показывается.

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

 

Теория

Итак, у нас в HTML есть два слоя - в то время когда один открыт (id="load"), другой должен быть скрыт (id="total"). Потом, когда контент в скрытом слое (id="total") загрузится, то должна произвестись замена - невидимый (id="load") становится видимым, а видимый (id="total") - невидимым. Замена производится на JavaScript. Итак…

Практика

Скрипт замены на JS, которая скрывает и показывает нужные слои. При желании, его можно вынести в отдельный файл и подключить. Либо просто в шапке его положить.

<script type="text/javascript">
var check_preload;
function preload_page() {
  if(check_preload) {
    document.getElementById("total").style.visibility = "visible";
    document.getElementById("load").style.visibility = "hidden";
  }
}   
</script>

Далее, код CSS.

<style type="text/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>

И наконец код, который должен содержаться в боди

<body onload="preload_page()">
  <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.

И напоследок картинку для поднятия настроения =).

howprogramswrite "Как скрасить время ожидания пользователя" или "Предварительная загрузка страницы"


1 звезда2 звезд3 звезд4 звезд5 звезд (голосов: 3, средний: 4.00 из 5)
Понравилась статья или журнал? Подписывайся на продолжение!
Отзывов: 31 на запись

""Как скрасить время ожидания пользователя" или "Предварительная загрузка страницы""

  1. респект за картинку ! самый дорогой и дешёвый вариант именно так и предлагают. xD

  2. ага! именно так, мне тоже понравилось =)

  3. eurokonsequent
    11/07/2010 at 10:24 Постоянная ссылка Цитировать

    Спасибо за пост, то что искал!

  4. Всегда пожалуйста =)

  5. Только у меня такая проблема: при использавание этого скрипта, не работает ни форма входа, ни мини-чат.

  6. ну, надо смотреть что и как.

  7. Вот не работало, убрал код, заработало. Сейчас специально поставлю код и дам ссылку, чат работать не будет =)

  8. Извини, сейчас нашел маленькую ошибку и все работает =)

  9. вот про это я и говорил ;)

  10. Извини конечно, но хотел бы тебя попросить, когда будет время глянь суда: http://wellon.3dn.ru/load/ там есть мини-чат вот как сделать, что бы при нажатии кнопки вызова этого самого чата, фон страницы затемнялся, т.е. внимание пользователя фокусировалось на чате.
    Зарание благодарен.

  11. ну, надо к кнопке вызова чата к событию онклик добавить функцию, чтобы окно чата было на переднем плане, а содержание сайта затемнялось. нужно,чтобы по клику появлялся полупрозрачный контейнер по высоте и ширине сайта, который лежит выше всего содержания, но не выше окна чата (регулируешь через z-index)

  12. Блигодарю, пыпытась осуществить ;)

  13. Подскажи, как сделать наоборот – есть форма, если все поля правильные она отсылает письмо, и вот во время отсылки чтобы был значок ожидания, а затем открывалась страница что все ок.

  14. нужно, чтобы без перезагрузки страницы на аяксе посылался запрос. читай статью http://shublog.ru/ajax/jquery/formy-chast-6-proverka-dannykh-formy-na-jquery-validate/

  15. Спасибо.
    но есть одна закавыка – у меня сайт на win1251, поэтому вылезают в форме вопросики, он передает в utf-8. да и саму форму не надо проверять – я php проверил данные и отфильтровал. потом форма письмо через гугл отправляет гдето 1 секунду – вот в этот момент и включить бы картинку – запрос выполняется – ждите… а то сейчас нетерпеливые жмут по несколько раз – столько писем и приходит

  16. поиграйся с кодировками в метатегах и кодировками тупо файлов

    проверка жабы не лишняя. а чтобы два раза не нажимали, сделай, чтобы после нажатия клавиша становилась неработающей. как продолжение – получаешь ответ от сервера и ставишь обратно кнопку включённой. jQuery Form в помощь

  17. Спасибо за пост.
    Александр, а вы не пробовали затачивать предзагрузку под cms, например wordpress?
    Мне понравилась на сайте bel-ros.ru . Пытаюсь разобраться, но пока результаты особо не радуют.)

  18. Пожалуйста!

    Так тут нечего встраивать практически, считай изменения в шаблон внести и всё.

    А вообще по цмс-кам я думал раздел открыть, но пока руки не доходят=)

  19. Виталий
    29/12/2011 at 18:10 Постоянная ссылка Цитировать

    Код работает отлично. Но когда подгружается страница появляется полоса прокрутки и крутанув скролл текст исчезает вверху странички.
    Предложение имею…
    position: absolute;
    заменить на
    position: fixed;
    Тогда div #load будет висеть всегда в центре страницы…

  20. ммм, хорошее решение.
    также, кстати, можно использовать не visibility, а display, тогда контент не будет появляться и скроллбаров, собственно, тоже

  21. Виталий
    30/12/2011 at 11:27 Постоянная ссылка Цитировать

    Заменил в скрипте visibility на display и основной контент вообще перестал показываться.
    Заменил в CSS – окошко прелоада показывается и видно как подгружаются данные из total…

  22. в лоб не поменять, надо менять немного сам скрипт =)

  23. Виталий
    31/12/2011 at 3:01 Постоянная ссылка Цитировать

    к сожалению я в этом не силён… могу нормально с html разобраться. или видео смонтировать. а программирование это не моё… :)

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

  25. НЕ РАБОТАЕТ В IE, подскажите решение, страница не исчезает

  26. webzter.ru гляньте в ие

  27. Александр Шуйский
    23/08/2012 at 9:46 Постоянная ссылка Цитировать

    сори, только сейчас увидел комментарий, видимо уведомление не дошло или затерялось…
    а сайт уже и не работает…

  28. Дмитрий
    19/03/2014 at 1:12 Постоянная ссылка Цитировать

    У меня почему-то не работает(

    Пожалуйста, подождите,идёт загрузка…

    и больше ничего .. картинки и содержимое сайта не отображается, а страница при этом не грузится. В чем проблема?

    P.S. Я ничего не менял, делал как написано, но ничего не работает(

  29. Александр Шуйский
    19/03/2014 at 15:17 Постоянная ссылка Цитировать

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

  30. Сократил скрипт до:

    check_preload=1;
    var check_preload;
    function preload_page() {
    if(check_preload) {
    document.getElementById(“total”).style.visibility = “visible”;
    document.getElementById(“load”).style.visibility = “hidden”;
    }
    }

    и залил одним фалом в корень сайта /load.js
    в конец перед /body
    вставил script src=”/load.js”
    все работает шЫкарно!

  31. Александр Шуйский
    25/12/2014 at 14:54 Постоянная ссылка Цитировать

    *THUMB UP*

Добро пожаловать, коллега! Вы можете оставить свой отзыв:





Допустимые XHTML-теги:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Подписка на комментарии