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

01.02.2016 | Категория: Web-мастеру и не только | Автор: ManHunter

При размещении на web-странице "тяжелых" изображений, которые в дальнейшем должны будут без задержек сразу открываться, часто используют технологию предзагрузки. Она заключается в том, что изображение открывается браузером в фоновом режиме, но не отображается сразу, а только кэшируется. Затем, при обращении к изображению, оно извлекается из локального кэша и мгновенно отображается, так как не требуется повторной загрузки данных из сети. Обычно прелоадеры изображений делают на JavaScript и вешают на событие onload или на DOMContentLoaded, или же просто размещают скрипт в начале страницы. Сам скрипт сводится к созданию нужного количества объектов Image и назначению им свойства src со ссылками на предзагружаемые изображение. Что-то наподобие такого:

Code (JavaScript) : Убрать нумерацию

var img1=new Image();
img1.src='/images/slider_image.jpg';
var img2=new Image();
img2.src='/images/menu_sprites.png';
var img3=new Image();
img3.src='/images/loading_spinner.gif';

Но можно обойтись вообще без скриптов, сделав предзагрузку изображений на чистом CSS. Делается это путем добавления псевдоэлемента :after к тегу body. В свойствах псевдоэлемента перечисляются ссылки на все картинки, которые должны быть предварительно загружены, а сам псевдоэлемент скрывается через display:none.

Code (HTML) : Убрать нумерацию

<style type="text/css">
body:after {
content:
url('/images/slider_image.jpg')
url('/images/menu_sprites.png')
url('/images/loading_spinner.gif')
;
display: none;
}
</style>

Способ протестирован во всех современных браузерах, все работает как надо. Большим плюсом прелоадера на CSS является то, что он будет работать даже в том случае, если у пользователя отключены скрипты в браузере.

Просмотров: 6606 | Комментариев: 5

Метки: CSS, JavaScript, оформление сайта

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

Спасибо очень познавательно не могли бы подсказать я хотел бы разместить на своем сайте радио чтобы оно не прерывалось при переходе с одной страниц на другую, в инете так и ненашел ответа как это реализовать. И вообще возможно ли это сделать не обладая знаниями об аяксе, пхп и т. д.

ManHunter (01.02.2016 в 13:28):

Браузеры на движке WebKit, браузеры на движке Gecko, браузеры на движке Presto (да, еще используются) и отдельно каличный IE.

Андрей (01.02.2016 в 13:22):

Современных браузеров по сути три (Chrome, Firefox, IE) ?

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

Заполните форму для добавления комментария

Если программист в девять утра уже на работе, значит он там же и ночевал

Главная страница Web-мастеру и не только Образ мышления: Assembler Мои программы Software Темная сторона Силы Обзоры техники А еще я туда ем! Жизнь в оффлайне Всякая всячина

Карта сайта Ссылки Обратная связь Правила сайта Настройки сайта RSS-канал

Материалы, опубликованные на этом сайте, не рекомендуются к просмотру лицам в возрасте до 16 лет без присутствия взрослых.

Метки статей

Свернуть

Вам помог этот сайт?

Поблагодарили 35,137 раз

День памяти русских воинов, павших при обороне Севастополя и в Крымской войне 1853-1856 годов

День дизайнера-графика

День тестировщика

Международный день красоты

Нашли на сайте орфографическую ошибку? Выделите ее мышкой и нажмите

Ctrl

Enter

Буду очень благодарен, если размеcтите мою кнопочку:

<a href="https://www.manhunter.ru" target="_blank"><img src="https://www.manhunter.ru/images/button.gif" alt="Личный блог ManHunter'а" title="Личный блог ManHunter'а" width="88" height="31" /></a>

$Яндекс тИЦ: {YANDEX_TIC}$

Яндекс ИКС: 360

Сейчас я слушаю

---

- автообновление

Powered by PCL's Speckled Band Engine 0.2 RC3
© ManHunter / PCL, 2008-2024
При использовании материалов ссылка на сайт обязательна
Время генерации: 0.07 сек. / MySQL: 2 (0.0033 сек.) / Память: 4.5 Mb

	2024 - СЕНТЯБРЬ
Пн	Вт	Ср	Чт	Пт	Сб	Вс
						1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30

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

Комментарии

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