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

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