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

Скрипты

Рисунок Скрипт индикатора загрузки страницы
Скрипт индикатора загрузки страницы Скрипт индикатора загрузки страницы
оценка: 4.3 из 5
оценок: 31, отзывов: 4

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

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

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

Code
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.js"></script>
<script type="text/javascript" src="http://github.com/malsup/blockui/raw/master/jquery.blockUI.js?v2.31"></script>

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

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

Code
<script type="text/javascript">
$(document).ready(function(){
  $.blockUI({message:'Немного подождите,
идет построение страницы...<br><img src="http://szenprogs.ru/img/sys/wait.gif" border="0" width="48" height="48" alt=""><br><a href="javascript://" onclick="$.unblockUI();return false;" style="font-size:7pt;">Разблокировать<\/a>',css:{background:'#fff',border:'5px solid #e0e0e0',padding:'3px'},overlayCSS:{background:'#000',opacity:.9}});
  $(window).load(function(){
    _uWnd.close('codeAlert');
    $.unblockUI();
  });
});
</script>

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

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

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

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




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


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

rss
Категория:Скрипты
Просмотрено:17229
Рейтинг:4.3/31
Дата добавления:2010-06-19 14:24, Суббота
Добавил:Szen
Теги:jQuery, загрузка

Мини-форум

№ 02010-06-19 14:24
Szen
Аватар участника Szen
Здесь вы можете задать вопрос или оставить комментарий по теме "Скрипт индикатора загрузки страницы".
Гость
№ 1
2010-08-31 11:50
SergLI
Аватар участника SergLI
Добрый день Szen!
У меня есть идея (для больших страниц или медленного нэта, чтобы посетитель не грустил или вообще не ушел), то вместо стандартного текста можно ли каким-то образом вставлять меняющиееся из некой базы или файла напр. короткие анекдоты или скрипт простенькой игры напр. крестики-нолики или что-то в этом роде? Это было бы чем-то новеньким и оригинальным на мой взгляд? wink
С уважением!
Сергей
№ 2
2010-08-31 12:23
Szen
Аватар участника Szen
SergLI, идея хорошая, и посещала нас не раз, но неудачная. Любой дополнительный контент (игры, анекдоты, картинки и.т.п) будет грузить страницу еще силнее. Да еще, пока страница полностью не загрузится, играть нормально будет вообще невозможно. А с анекдотами или небольшими текстами еще можно что-нибудь предпринять. Их можно читать, пока страница грузится. Но это, фактически, попап (окно, всплывающее без запроса пользователя), что для нас неуместно.
Szen · WWW
№ 3
2010-09-02 11:27
SergLI
Аватар участника SergLI
.... с играми понятно, но вот короткие анекдоты (не весящие ничего), было бы прикольнее читать и даже был бы стимул перегрузить или открыть след страницу, чтобы найти то, что не дочитал или уидеть новый...ИМХО smile
У меня раньше на сайте висел анимированный гиф -ползущая черепаха и подпись счас.. счас.. счас.. еще чуть-чуть.... но анекдоты думаю будут лучше. Если подскажите код - буду примного благодарен!
Сергей
№ 4
2010-09-02 12:11
SergLI
Аватар участника SergLI
и еще вопрос, когда скрипты быстрее работают: когда загружаются со стороннего сайта или со своего?
Сергей
Учавствовать в обсуждении "Скрипт индикатора загрузки страницы" могут только зарегистрированные пользователи.
Реклама
Кнопка портала
Посетители
Друзья портала
Вакантное место для вашей рекламы!
RSS лента Блога
RSS лента Каталога файлов
RSS лента Новостей
Будьте в курсе событий.
Введите ваш email:

Личный блок
  • Гость портала.
  • Личных данных нет.
Вход на сайт
Регистрация
Опрос
Ваша оценка дизайна
Всего ответов: 1244
Статистика
Valid HTML 4.01 Transitional

Яндекс цитирования



Онлайн всего: 2
Гостей: 2
Пользователей: 0
Портал SzenProgs.ru © 2008 - 2018 · Условия
Администратор и дизайнер портала: Szen
Хостинг от uCoz