Использование иконок загрузки. Статьи. wb0.ru - Все для веб-мастера, on-line сервисы

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

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

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

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

  1. Иконка загрузки, которую можно выбрать тут или тут. Для нашего урока я буду использовать:
  2. В начале документа между тегами необходимо подключить jQuery (помните про путь к файлу).

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

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

    1. $(function() {
    2. $('#large-img').hide();
    3. $('#large-img').load( function() {
    4. $('#loader').hide();
    5. $('#large-img').show();
    6. } );
    7. });
  4. HTML.

    1. <img id="loader" src="ajax-loader.gif" alt="Loading, Loading!"></img>
    2. <img id="large-img" src="wheel.jpg" alt="London Eye"></img>
  5. CSS код, который поможет поместить иконку загрузки по центру.

    1. <style type="text/css">
    2.     .centered {
    3. position: fixed;
    4. top: 50%;
    5. left: 50%;
    6. margin-top: -11px; /* 50% высоты */
    7. margin-left: -63px;  /* 50% ширины */
    8. height: 22px;
    9. width: 126px;
    10. }
    11. * html .centered {
    12. position: absolute;
    13. }
    14. </style>

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

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

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

Дата публикации: 11.08.2010
ruseller.com

Статьи по теме:


Комментарии:
  1. zzzxxcc: *censored* перекопировывать материал у других сайтов...
    Добавлен: 2011-04-02


   Ваш псевдоним:
Ваш комментарий:

Новости Интернет


Поиск




Наши партнеры




Последний пересчет

тИЦ:07 Окт 15
PR:09 Дек 13

Посетители

On-Line:11
Рекорд:1794
Зафиксирован:01 Окт 13

Наши партнеры

wservices.ru - регистрация доменов, Whois-сервисы Смайлы на все случаи жизни


Календарь событий


 
Copyright © 2006-2017, wb0.ru