Подпишись на наши RSS Уроки по Фотошоп , просто щелкнув по иконке.

Новинка! Узнайте о Самом Результативном Способе Изучения Фотошопа, Без Посещения Дорогих Курсов, Без Черно-Белых Самоучителей и Без Метода Тыка!

10 Часов Практических Уроков Записанных с Экрана Монитора с Подробными Аудио-Комментариями сделают из Вас настоящего Учителя Фотошоп!

Подробнее..

Создаём новогоднюю поздравительную открытку
Создаём сложное выделение волос
Превращаем современную фотографию в старую
Создаём разноцветную светящуюся спираль
Наносим естественную татуировку в Фотошопе

Уроки по сайтостроению - Рубрика: PHP

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


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


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


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


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


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


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>


Вот и все отлично работает :)


Данный урок подготовлен для Вас командой сайта http://ruseller.com




Если хотите не упустить данный урок, добавьте его в закладки:  

Хотите освоить весь Фотошоп с нуля?

Рекомендую Вам курс "Учитель Фотошопа в видеоформате", который состоит из 2-х частей: теоретической и практической. Все уроки даны в видеоформате с подробным озвучиванием всех выполняемых действий. Именно такой подход в изучении, позволит Вам в максимально короткие сроки овладеть всеми аспектами работы в Фотошоп.

Узнать подробнее

Рейтинг:     Добавлено: 2009-04-15    Просмотров: 2873    Сайт-источник: www.lateralcode.com

Оцените урок: 1   2   3   4   5   6   7   8   9   10    



Комментарии (1)


Комментарий by anonimus, От 2010-07-24

Прикольно!

Оставить комментарий:

Ваше имя:

Комментарий:

Введите число показаное на картинке (проверка от автороботов):

  


 

Рассылка - "Лучшие видеоуроки Фотошоп даром". Подписавшись на неё, Вы 2 раза в месяц будете получать на свой почтовый ящик, ссылки на лучшие уроки по работе в программе Adobe Photoshop совершенно бесплатно!

Лучшие уроки по Фотошопу 2 раза в месяц!

Ваше имя на русском: *
Ваш Email адрес: *

Подпишитесь сейчас и получите доступ к разделу "Лучшие уроки Фотошопа".

Если Вы давно мечтаете о создании собственного сайта на движке Drupal, то советую Вам обратить внимание на мой новый видеокурс "Drupal - Как создать профессиональный сайт с нуля". Это более 100 видеоуроков из которых Вы узнаете, как создать 4 сайта различной напрвленности, сложности и функционнальности.

Узнать подробнее

Если вы маскируете красный объект (скажем, лепестки розы), маску трудно будет увидеть на экране. В таком случае измените ее цвет. Дважды щелкнув по кнопке Quick Mask Mode, откройте в появившемся диалоговом окне палитру цветов щелчком по квадратику Color (Цвет). Выберите в левой части палитры подходящий оттенок и нажмите кнопку OK.

Узнать больше

Внимание!
X
Хотите Получать 2 Видеоурока по Работе В Программе Фотошоп ЕЖЕМЕСЯЧНО?
Ваш e-mail: *
Ваше имя: *