Добавляем иконку предзагрузки к большим изображениям при помощи CSS
Давайте представим, что у нас есть специальная страница, содержащая одно или несколько больших изображений, и мы хотим дать знать посетителю, что изображение загружается. Для этой цели можно было бы использовать Javascript, который выводил бы иконку предзагрузки для всех изображений, которые еще не загрузились.
Однако, у нас есть намного более простой способ достичь того же самого, особенно, если на странице выводится множество больших изображений.
1. Находим иконку предварительной загрузки
Существует много сайтов, позволяющих создавать свои собственные изображения предзагрузки. Например, вот этот. Только не забудьте обратить внимание на то, что это изображение (размер файла) не должно быть слишком большим. Пусть будет такое:
2. Пишем CSS-код
Код минимален, создается всего одно просто правило следующего содержания:
.load {
background: url(i/load.gif) center no-repeat;
}
Вместо load.gif, естественно, должно быть название вашей иконки предзагрузки.
3. Пишем HTML-код
Чтобы иконку предзагрузки можно было центрировать относительно размеров изображения, поместим изображение в div-контейнер, которому зададим размеры изображения:
<div class="load" style="width:200px;height:200px">
<img src="large.jpg" alt="Альтернативный текст" /></div>
Готово.
Посмотреть примеры с несколькими вариациями описанного способа можно здесь.
Данный способ был проверен и совместим с Internet Explorer 5.5, 6, 7, FireFox (PC и Mac), Netscape и Safari (PC и Mac).
Вольный перевод статьи “css: add a “loading” icon to your larger images”
* * *
В Москве и Московской области существует огромное количество фитнес-центров. На сайте InFit.ru представлены лучшие фитнес клубы, а также всегда актуальные новости и статьи на данную тему, на которые можно подписаться по электронной почте.
Смотрите также
Простая техника позиционирования изображения при обтекании текстом
Довольно часто при верстке создается необходимость расположить изображение слева от текста таким образом, чтобы текст находился справа от изображения и не сворачивал под него, т.е. должно это выглядеть вот так: ...
5 советов верстальщику
Лучше поздно, чем никогда. Наконец-то я готов представить свои пять советов в рамках эстафеты, запущенной Никитой, тем более что “пинок” получил от трех человек. 1) Читайте блоги специалистов в данной ...
Альтернативный текст для графики при использовании CSS
Смотря сегодняшним взглядом на одну их своих предыдущих статей “Альтернативный текст для изображений в блочной верстке“, понимаю, что я переборщил с кодом, как в части HTML, так и в части ...
Альтернативный текст для изображений в блочной верстке
С дивовой версткой я работаю по следующему принципу – все оформление (в том числе графика) через CSS, в HTML же выносятся только изображения, дополняющие текст, изложенный на странице. В связи ...
Комментарии (16)
Полезно, заюзаем, спасибо 8-)
так можно и без дополнительного дива – class=”load” присвоить сразу картинке
для FF и опера задать: min-width: 32px; min-height: 32px; – это если не заданы размеры картинки в img
3-й пункт нужно что ли к каждой картинке присобачивать??
Може это все можно реализовать плагином для WP как-нибудь?
rmaksim, да, можно и без дива, в примерах автора статьи такой пример как раз есть.
Конечно :)
Не знаю.
А можно это сделать как-нибудь для просто тега img у которого нет не высоты не ширины, на автомате?
Бухгалтер, если размер всех изображений одинаковый, то можно с помощью CSS задать ширину и высоту для тега
img.Каждую картинку тегами окружать – слишком утомительно… ждем-с чуда в виде плагина для WP…
Народ верно говорит, div’ы то добавить пусть и не сложно, но нада что-то делать, чтобы не прописывать к каждой картинке высоту и ширину…
Хорошая идея. Надо будет реализовать на каком-нибудь проекте.
Обязательно попробую при случае. Результат потом покажу.
интересно, полезно и… просто!!!
спасибо, самому с этим разбираться было бы очень утомительно! обязательно буду использовать!
круто!
только некрасиво с размером картинок
(пошел думать)
да не сложно же сделать и так, чтобы не присобачивать класс – для тега img в классе новости прописать код, и он будет автоматом добавляться ко всем картинкам, размещённым в новости
Я сделал так:
Можно, в принципе, задать для любого класса:
Sarmat
так ведь под каждой картинкой прелоад будет, под каким нибудь PNG будет не в тему,
или из под смайла торчать, тоже не кул
Sarmat, поддерживаю. Я бы сейчас именно так и сделал. Только в этом случае нужно, чтобы у изображения обязательно присутствовали параметры ширины и высоты.