Скрипт индикатора загрузки страницы

Скрипты

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

Индикатор загрузки мы будем делать на основе jQuery и плагина blockUI к нему. Скачать blockUI можно по этой ссылке. Сам jQuery - тут.

Для начала подключим скрипты к странице. Для этого в разделе HEAD пишем следующее:

Code

Внимание! Если ваш сайт создан на UCOZ, то ставить jQuery не нужно. Подключаете только blockUI.

С приготовлениями закончили. Теперь можно ставить сам скрипт. Код скрипта загрузки страницы выглядит следующим образом:

Code

Скрипт нужно вписать сразу после открывающего тега BODY.

Этот скрипт не имеет особых настраиваемых параметров, поэтому должен начать работать сразу после установки. При желании можете поменять стили css и overlayCSS в скрипте.

Удачи в свершениях!

Скрипт индикатора загрузки страницы
Скрипты
SzenProgs.ru

Для работы понадобится jQuery.

Категория:	Скрипты
Просмотрено:	7885
Рейтинг:	4.6/19
Дата добавления:	19.06.2010 14:24, Суббота
Добавил:	Szen
Теги:	jQuery, загрузка

Опечатка

Дополнительно к Скрипт индикатора загрузки страницы

Мини-форум

№ 0	19.06.2010 14:24
Szen	Здесь вы можете задать вопрос или оставить комментарий по теме "Скрипт индикатора загрузки страницы".
	Цитата Гость

№ 1	31.08.2010 11:50
SergLI	Добрый день Szen! У меня есть идея (для больших страниц или медленного нэта, чтобы посетитель не грустил или вообще не ушел), то вместо стандартного текста можно ли каким-то образом вставлять меняющиееся из некой базы или файла напр. короткие анекдоты или скрипт простенькой игры напр. крестики-нолики или что-то в этом роде? Это было бы чем-то новеньким и оригинальным на мой взгляд? С уважением!
	Цитата Сергей

№ 2	31.08.2010 12:23
Szen	SergLI, идея хорошая, и посещала нас не раз, но неудачная. Любой дополнительный контент (игры, анекдоты, картинки и.т.п) будет грузить страницу еще силнее. Да еще, пока страница полностью не загрузится, играть нормально будет вообще невозможно. А с анекдотами или небольшими текстами еще можно что-нибудь предпринять. Их можно читать, пока страница грузится. Но это, фактически, попап (окно, всплывающее без запроса пользователя), что для нас неуместно.
	Цитата Szen · WWW

№ 3	02.09.2010 11:27
SergLI	.... с играми понятно, но вот короткие анекдоты (не весящие ничего), было бы прикольнее читать и даже был бы стимул перегрузить или открыть след страницу, чтобы найти то, что не дочитал или уидеть новый...ИМХО У меня раньше на сайте висел анимированный гиф -ползущая черепаха и подпись счас.. счас.. счас.. еще чуть-чуть.... но анекдоты думаю будут лучше. Если подскажите код - буду примного благодарен!
	Цитата Сергей

№ 4	02.09.2010 12:11
SergLI	и еще вопрос, когда скрипты быстрее работают: когда загружаются со стороннего сайта или со своего?
	Цитата Сергей

№ 5	02.09.2010 18:38
Szen	Quote (SergLI) когда скрипты быстрее работают Если скрипт распространенный (jQuery, например), то рационально использовать ссылку от производителя. Тогда скрипт кешируется на одном сайте, а на другом просто вынимается из кеша. Если же скрипт не популярный, то лучше его переносить на свой хост.
	Цитата Szen

№ 6	02.09.2010 18:39
Szen	Quote (SergLI) Если подскажите код - буду примного благодарен! Попробую реализовать что-нить подобное. Как сделаю - будет новый материал.
	Цитата Szen

№ 7	21.10.2010 21:26
Szen	Небольшое дополнение для тех, кто хочет, чтобы окошко висело еще некоторое время после загрузки страницы (например, для реализации показа анекдотов). Код выглядит следующим образом: Code <script type="text/javascript" src="http://www.detskieradosti.ru/sys/jquery.blockUI.js?v2.31"></script> <script type="text/javascript"> $(document).ready(function(){ $.blockUI({message:'<br><br>Ожидайте загрузку страницы...<br><br><span style="font-size:12pt"><span style="color:red">А пока - АНЕКДОТ</span></span><br><br>Янушка, впервые увидев снежок из окошка, восхищённо вздыхает:<br>— Гы-ы-ы! Мама, сколько сахара... <br><br><img src="http://www.detskieradosti.ru/_tbkp/getImage.gif"><br><br><a href="javascript://" onclick="$.unblockUI();return false;" style="font-size:12pt;">Закрыть<\/a><br><br>',css:{background:'#f9e40d',border:'5px solid #e0e0e0',padding:'3px'},overlayCSS:{background:'#cce42c',opacity:.9}}); $(window).load(function(){ window.setTimeout("$.unblockUI();_uWnd.close('codeAlert');",5000); }); }); </script> Значение 5000 - это время задержки после загрузки страницы. Измеряется в миллисекундах. В примере - 5 секунд.
	Цитата Szen · WWW