Зачем использовать предварительную загрузку? Многие сайты используют изображения для пунктов меню. Когда вы наводите курсор на элемент меню, его изображение меняется. Иногда это происходит не сразу, а через несколько секунд. Происходит это потому что браузер не загружает изображения, появляющиеся при наведении курсора, при загрузке всей страницы. Загрузка происходит именно после наведения. Вот тут нам и поможет предварительная загрузка. Начнем с этого CSS кода:
Code
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:
Code
<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>
Code
<div class="loader"></div>
В качестве фона этого блока мы используем изображение, которое необходимо предварительно загрузить. Для этого добавим в css следующее:
Code
.loader{
background:url(images/hover.gif);
margin-left:-1000px;
}
Таким образом этот блок будет расположен за пределами видимой части браузер, а изображение будет загружено.
Если необходимо загрузить несколько изображений, просто добавьте необходимое количество свойств background.
Code
.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!
