Предварительная подгрузка изображений в CSS
Предварительная загрузка изображений в CSS необходима тогда, кодга нужно отобразить картинку, только после определенного действия пользователя, а не сразу, по загрузке HTML-документа. Например, меняющееся изображение (фон) пункта меню, при наведении на него указателя мыши. Проблема состоит в том, что браузер загружает скрытые изображения, только после действия пользователя. Чем больше подгружаемое изображение и медленнее соединение клиента с сервером, тем продолжительнее будет пауза, перед появлением фоновой картинки. Код css, который будет отображать изображения с задержкой, приведен ниже. Для эксперимента, используйте изображения menu_bg.gif, menu_bg_hover.gif размером в несколько МБ, тогда хорошо будет заметен "эффект" паузы.
display: block;
width: 100px;
height: 30px;
text-decoration: none;
background: url(http://obovsem.org.ua/img/all/articles/7/menu_bg.gif);
text-align: center;
line-height: 30px;
}
a.n7_prim1:hover {
text-decoration: underline;
background: url(http://obovsem.org.ua/img/all/articles/7/menu_bg_hover.gif);
}
Пример меню, когда при наведении на один из его пунктов, изображение для этого действия появляется с задержкой:
Следует учесть, что после перезагрузки страницы, изображение, которе появляется при наведении мыши на пунк меню, может остаться в кеше браузера и эффект задержки виден не будет.
Предварительная подгрузка изображений в CSS:
Для решения этой задачи, нужно добавить такую строку в CSS файл:
width: 0px;
height: 0px;
display: inline;
background-image: url(http://obovsem.org.ua/img/menu_bg_hover2.gif);
/* другие изображеня для предварительной загрузки */
}
И в коде HTML-документа, в любой части между <body>...</body> записать такой тег:
Пример меню, когда при наведении на один из его пунктов, изображение для этого действия появляется без задержки:
Использование совмещенных изображений
Чтобы избавиться от предварительной подгрузки изображения средствами CSS, можно воспользоваться вариантом, когда одна картинка содержит 2 изображения. При наведении мыши на пункт меню, необходимо просто сменить, при помощи CSS, положение фонового изображения.
Пример меню, когда при наведении на один из его пунктов, изображение для этого действия хранится в одном файле с главной картинкой:
Пример организации смещения фона каринки, с использованием CSS, приведен ниже:
display: block;
width: 100px;
height: 30px;
text-decoration: none;
background: url(http://obovsem.org.ua/img/all/articles/7/sovmeschennaya_knopka.gif);
text-align: center;
line-height: 30px;
}
a.n7_button:hover {
background-position: 0 -30px; /* смещаем фон согласно подготовленной картинки */
text-decoration: underline;
}
Полезные ссылки: |
| CSS-файл примеров предварительной подгрузки и использования совмещенных изображений |
|
|