Blog. Just Blog

Предзагрузка изображений с помощью CSS

Версия для печати Добавить в Избранное Отправить на E-Mail | Категория: Web-мастеру и не только | Автор: ManHunter
При размещении на web-странице "тяжелых" изображений, которые в дальнейшем должны будут без задержек сразу открываться, часто используют технологию предзагрузки. Она заключается в том, что изображение открывается браузером в фоновом режиме, но не отображается сразу, а только кэшируется. Затем, при обращении к изображению, оно извлекается из локального кэша и мгновенно отображается, так как не требуется повторной загрузки данных из сети. Обычно прелоадеры изображений делают на JavaScript и вешают на событие onload или на DOMContentLoaded, или же просто размещают скрипт в начале страницы. Сам скрипт сводится к созданию нужного количества объектов Image и назначению им свойства src со ссылками на предзагружаемые изображение. Что-то наподобие такого:
  1. var img1=new Image();
  2. img1.src='/images/slider_image.jpg';
  3. var img2=new Image();
  4. img2.src='/images/menu_sprites.png';
  5. var img3=new Image();
  6. img3.src='/images/loading_spinner.gif';
Но можно обойтись вообще без скриптов, сделав предзагрузку изображений на чистом CSS. Делается это путем добавления псевдоэлемента :after к тегу body. В свойствах псевдоэлемента перечисляются ссылки на все картинки, которые должны быть предварительно загружены, а сам псевдоэлемент скрывается через display:none.
  1. <style type="text/css">
  2. body:after {
  3.     content:
  4.         url('/images/slider_image.jpg')
  5.         url('/images/menu_sprites.png')
  6.         url('/images/loading_spinner.gif')
  7.     ;
  8.     displaynone;
  9. }
  10. </style>
Способ протестирован во всех современных браузерах, все работает как надо. Большим плюсом прелоадера на CSS является то, что он будет работать даже в том случае, если у пользователя отключены скрипты в браузере.

Поделиться ссылкой ВКонтакте Поделиться ссылкой на Facebook Поделиться ссылкой на LiveJournal Поделиться ссылкой в Мой Круг Добавить в Мой мир Добавить на ЛиРу (Liveinternet) Добавить в закладки Memori Добавить в закладки Google
Просмотров: 1831 | Комментариев: 5

Внимание! Статья опубликована больше года назад, информация могла устареть!

Комментарии

Отзывы посетителей сайта о статье
Trym (25.01.2017 в 06:35):
ЦитатаНавигация через анкоры + динамическая загрузка страниц
спасибо буду разбираться
ManHunter (24.01.2017 в 15:01):
Цитатая хотел бы разместить на своем сайте радио чтобы оно не прерывалось при переходе с одной страниц на другую

Навигация через анкоры + динамическая загрузка страниц.

ЦитатаИ вообще возможно ли это сделать не обладая знаниями об аяксе, пхп и т. д.

Конечно. Платишь деньги тем, кто умеет, и они все делают.
Trym (24.01.2017 в 13:48):
Спасибо очень познавательно не могли бы подсказать я хотел бы разместить на своем сайте радио чтобы оно не прерывалось при переходе с одной страниц на другую, в инете так и ненашел ответа как это реализовать. И вообще возможно ли это сделать не обладая знаниями об аяксе, пхп и т. д.
ManHunter (01.02.2016 в 13:28):
Браузеры на движке WebKit, браузеры на движке Gecko, браузеры на движке Presto (да, еще используются) и отдельно каличный IE.
Андрей (01.02.2016 в 13:22):
Современных браузеров по сути три (Chrome, Firefox, IE) ?

Добавить комментарий

Заполните форму для добавления комментария
Имя*:
Текст комментария (не более 2000 символов)*:

*Все поля обязательны для заполнения.
Комментарии, содержащие рекламу, ненормативную лексику, оскорбления и т.п., а также флуд и сообщения не по теме, будут удаляться. Нарушителям может быть заблокирован доступ к сайту.
Наверх
Powered by PCL's Speckled Band Engine 0.2 RC3
© ManHunter / PCL, 2008-2017
При использовании материалов ссылка на сайт обязательна
Время генерации: 0.09 сек. / MySQL: 2 (0.0043 сек.) / Память: 4.5 Mb
Наверх