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

Начнем с этого CSS кода:

ul{
 margin: 0;
 padding: 0;
 list-style-type: none;
 font: 13px ‘Lucida Grande’, Arial, sans-serif;
}
ul li{
 display: inline;
}
ul li a{
 display:block;
 width:120px;
 text-decoration: none;
 padding: 0.3em 1em;
 color: #000;
 background:url(images/link.gif);
}
ul li a:hover{
 width:120px;
 background:url(images/hover.gif);
}

HTML:

<ul>
 <li><a href="http://www.divitodesign.com">Главная</a></li>
 <li><a href="http://www.divitodesign.com">Статьи</a></li>
 <li><a href="http://www.divitodesign.com">Блог</a></li>
 <li><a href="http://www.divitodesign.com">Контакты</a></li>
</ul>

Теперь добавим сам загрузчик, пропишите следующий код перед </body>

<div class="loader"></div>

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

.loader{
 background:url(images/hover.gif);
 margin-left:-1000px;
 }

Таким образом этот блок будет расположен за пределами видимой части браузер, а изображение будет загружено.

Если необходимо загрузить несколько изображений, просто добавьте необходимое количество свойств background.

.loader{
 background:url(images/hover.gif) no-repeat;
 background:url(images/hover2.gif) no-repeat;
 background:url(images/hover3.gif) no-repeat;
 background:url(images/hover4.gif) no-repeat;
 margin-left:-1000px;
}

Теперь вы можете использовать предварительную загрузку без использования Javascript!

Оригинал: Create an image pre-loader with CSS