Добавляем иконку загрузки к большим изображениям на CSS

Original author: dynamixlabs
  • Translation
Давайте представим, что у вас на странице имеются большие картинки, и вы хотите, чтобы пользователь знал, что они загружаются. С помощью JavaScript'а можно внедрить анимированную иконку ко всем изображениям, которые еще не загружены, но мы можем предложить вам более простой и чистый способ.

Шаг 1: Найдите анимированную иконку


Существует много сайтов, где вы можете создать свою картинку для загрузчика. Наш любимый этот. Главное не выбирайте иконку, которая будет очень много весить. Вот такую сгенерировали мы:



Шаг 2: Добавьте CSS-правила


Тут совсем немного кода, и вы можете просто скопировать его. Только не забудьте сменить «youricon.gif» на свою картинку.

.load {
    background: url('images/youricon.gif') no-repeat center;
}

Шаг 3: Примените код


Тут существует несколько способов, но лучший — это обернуть больше картинки в div с классом load. Также нужно задать ему ширину и высоту картинки.

<div class="load" style="width:200px;height:200px">
<img src="large.jpg" alt="alternate text" /></div>

Посмотреть результат можно тут.

Как сообщил нам Lim Chee Aun, вы можете не оборачивать изображение в div, а сделать вот так:

<img src="large.jpg" alt="alternate text" class="load" style="width:200px;height:200px" />

Но причина, по которой мы не упомянули этот способ изначально, в том, что если картинка не была загружена, то она может испортить вам внешний вид сайта (похоже, что авторы статьи сидят под IE — прим. перев.). Если вы абсолютно уверены, что у вас не возникнет никаких проблем с загрузкой, вам по-барабану, что иконка загрузчика будет не по-центру и у вас много картинок, то вас может устроить и такое решение:

img {
    background: url('images/youricon.gif') no-repeat center;
}

Но будьте осторожны — если у вас белый фон у загрузчика, то он может попасть на черный фон, например, в колонке сбоку (похоже, что иконки с прозрачным фоном уже некошерные — прим. перев.). Поэтому лучше сделать так:

#yourcontentdiv img {
    background: url('images/youricon.gif') no-repeat center;
}

Посмотрите окончательный результат!
Share post

Similar posts

AdBlock has stolen the banner, but banners are not teeth — they will be back

More
Ads

Comments 16

    –9
    Способ немного очевидный, но Хабре я его не встречал, так что пускай будет.
      +9
      This entry was posted on Thursday, January 17th, 2008
        –10
        А что не так?
        0
        похоже, что иконки с прозрачным фоном уже некошерные — прим. перев.
        из-за отсутствия полупрозрачности в gif все равно будет выглядеть отстойно
          +7
          А еще у тегов <td> есть атрибуты colspan и rowspan — они позволяют объединять ячейки, представляете?
            +9
            Есть и грустная новость — Стив Джобс умер.
              0
              А где прикупить материнку под Am486?
                –2
                Попробуйте поискать на Земле, я слышал их ещё производят на этой отсталой, грязной планете заселённой китайцами.
                  0
                  А не подскажете координаты относительно Антареса, а то я удалил давно эту планету из своего квантового телепорта…
                    0
                    Да хватит уже придуриваться! Вам сразу за Марсом налево.
                      –2
                      Понятия не имею.
                      Никогда там не был и не имею ни малейшего желания.
              +1
              Дайте покататься на машине времени
                +2
                А зачем тег CSS 3?
                  0
                  Спасибо, убрал.
                  0
                  Может кому пригодиться: еще один сайт с генераторами подобных иконок www.loadinfo.net/
                    +1
                    А еще если указывать у <img> width и height, то ничего не будет расползаться.

                    Only users with full accounts can post comments. Log in, please.