Использование иконок загрузки

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

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

В данном простом уроке Вы узнаете как это сделать на своей страничке.

Демо версия находится здесь. Файлы можно скачать тут.

Нам понадобится:

1. Иконка загрузки, которую можно выбрать тут. Для нашего урока я буду использовать:

2. В начале документа между тегами <head></head> необходимо подключить jQuery (помните про путь к файлу).

<script type="text/javascript" src="jquery.min.js"></script>

3. Добавим функцию сразу после верхнего кода, которая будет прятать слой ("large-img") с контентом (в примере используется большая картинка, но на ее месте может быть что-угодно) до тех пор, пока он полностью не загрузится. После загрузки функция будет его выводить, а слой ("loader") с иконкой прятать.

$(function() {
$('#large-img').hide();
$('#large-img').load( function() {
$('#loader').hide();
$('#large-img').show();
} );

});

4. HTML

<img id="loader" src="ajax-loader.gif" alt="Loading, Loading!"></img>
    <img id="large-img" src=""wheel.jpg"" alt="London Eye"></img>

Вот и все! Пользуйтесь Удачного всем уикенда!

P.S. по просьбе наших уважаемых посетителей предлагаю Вам CSS код, который поможет поместить иконку загрузки по центру:

<style type="text/css">
    .centered {
position: fixed;
top: 50%;
left: 50%;
margin-top: -11px; /* 50% высоты */
margin-left: -63px;  /* 50% ширины */
height: 22px;
width: 126px;
}
* html .centered {
position: absolute;
}
</style>

Для того, чтоб все работало необходимо обязательно знать ширину и высоту картинки загрузки. В нашем примере высота - 22 пикселя, ширина - 126 пикселей. Ее мы задали в коде. Также в двух строках Вам необходимо будет внести 50% ширины и высоты.

Также необходимо будет присвоить картинке класс "centered":

<img id="loader" class="centered" src="ajax-loader.gif" alt="Loading, Loading!"></img>

Вот и все отлично работает :) Демо версия пока не обновлена.

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.lateralcode.com
Перевел: Максим Шкурупий
Урок создан: 10 Апреля 2009
Просмотров: 61394
Правила перепечатки

5 последних уроков рубрики "jQuery"

^ Наверх ^