Время:
Новых сообщений: Нет
Вы на форуме дней
Ваша группа: Гость
Ваш IP: 3.145.63.33
Logical-Portal — молодежный портал со своей изюминкой, каждый сможет найти что-то интересное и полезное для себя, например наш форум общения с которым вам обязательно нужно ознакомиться.
  • Страница 1 из 1
  • 1
Модератор форума: Hawk  
Предварительная загрузка изображений с помощью CSS
Сообщение оставлено 06.12.2010 в 17:57:25 | Сообщение #1
Зачем использовать предварительную загрузку? Многие сайты используют изображения для пунктов меню. Когда вы наводите курсор на элемент меню, его изображение меняется. Иногда это происходит не сразу, а через несколько секунд. Происходит это потому что браузер не загружает изображения, появляющиеся при наведении курсора, при загрузке всей страницы. Загрузка происходит именно после наведения. Вот тут нам и поможет предварительная загрузка.

Начнем с этого 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!
 

У гениальности есть побочные эффекты
 
   
Сообщение оставлено 22.02.2011 в 00:24:05 | Сообщение #2
Кул!
 
 
   
  • Страница 1 из 1
  • 1
Поиск:
 
Графика от: Megas, GraFOS | Дизайн сверстал E.A.
Хостинг от uCoz
Яндекс.Метрика