Предварительная загрузка изображений

Рассмотрим простой пример использования предварительной загрузки изображения. И начнем этот урок мы с этого 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; }

 

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

 

Вот тут нам и поможет предварительная загрузка.

Всем спасибо за внимание!




Рекомендуем почитать

 

Добавить комментарий


Ваше имя:


Комментарий:


Введите: Картинка