Предварительная загрузка изображений
Рассмотрим простой пример использования предварительной загрузки изображения. И начнем этот урок мы с этого 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.
Зачем использовать предварительную загрузку? Многие сайты используют изображения для пунктов меню. Когда вы наводите курсор на элемент меню, его изображение меняется. Иногда это происходит не сразу, а через несколько секунд. Происходит это потому что браузер не загружает изображения, появляющиеся при наведении курсора, при загрузке всей страницы. Загрузка происходит именно после наведения.
Вот тут нам и поможет предварительная загрузка.
Всем спасибо за внимание!
Рекомендуем почитать