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

Скрипты

Рисунок Скрипт индикатора загрузки страницы
Скрипт индикатора загрузки страницы Скрипт индикатора загрузки страницы
оценка: 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
Категория:Скрипты
Просмотрено:16446
Рейтинг: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:

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

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



Онлайн всего: 6
Гостей: 5
Пользователей: 1

PetrDut
Портал SzenProgs.ru © 2008 - 2017 · Условия
Администратор и дизайнер портала: Szen
Хостинг от uCoz