- Метки урока:
- jquery
- оптимизация
Использование иконок загрузки
Представьте ситуацию, когда Вы заходите на новый сайт. Все содержимое сайта, которое Вам необходимо, как-будто не грузится. Вы не знаете происходит ли что-либо или просто на странице ничего нет. В конце концов, Вы покидаете страницу.
Такая ситуация очень распространенная, когда на разных сайтах используются большие файлы при загрузке. Чтобы справиться с такой ситуацией необходимо использовать иконку загрузки, которая будет показывать что сайт грузится.
В данном простом уроке Вы узнаете как это сделать на своей страничке.
Демо версия находится здесь. Файлы можно скачать тут.
Нам понадобится:
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"
-
Анимация набора текста на jQuery
Сегодня мы бы хотели вам рассказать о библиотеке TypeIt — бесплатном jQuery плагине. С её помощью можно имитировать набор текста. Если всё настроить правильно, то можно добиться очень реалистичного эффекта.
-
Временная шкала на jQuery
jQuery плагин для создания временной шкалы.
-
Заметка: Перезагрузка и редирект на JavaScript
Быстрая заметка, где вы сможете найти парочку JS сниппетов для перезагрузки и перенаправления пользователей через JavaScript.
-
Рисуем диаграмму Ганта
jQuery плагин для создания диаграммы Ганта.
-
AJAX и PHP: загрузка файла
Пример того как осуществить загрузку файла через PHP и jQuery ajax.