Предварительная загрузка изображений средствами css (Preload Images with CSS)

Этот метод позволяет избежать использования javascript для предварительной загрузки изображений.

Метод достаточно прост и эффективен и состоит из двух частей css и html код.



CSS:

#preloadedImages {
width: 0px;
height: 0px;
display: inline;
background-image: url(path/to/image1.png);
background-image: url(path/to/image2.png);
background-image: url(path/to/image3.png);
background-image: url(path/to/image4.png);
background-image: url();
}

HTML:

<div id="preloadedImages"></div> 

Как это работает?

Браузер загружает preloadedImages css как фоновые изображения не отображая их, но помещает их в кэш браузера, что позволяет в последствии быстро обращаться в предварительно загруженным изображениям.