|
||||||
|
Предварительная подгрузка изображений в CSSПредварительная загрузка изображений в CSS необходима тогда, кодга нужно отобразить картинку, только после определенного действия пользователя, а не сразу, по загрузке HTML-документа. Например, меняющееся изображение (фон) пункта меню, при наведении на него указателя мыши. Проблема состоит в том, что браузер загружает скрытые изображения, только после действия пользователя. Чем больше подгружаемое изображение и медленнее соединение клиента с сервером, тем продолжительнее будет пауза, перед появлением фоновой картинки. Код css, который будет отображать изображения с задержкой, приведен ниже. Для эксперимента, используйте изображения menu_bg.gif, menu_bg_hover.gif размером в несколько МБ, тогда хорошо будет заметен "эффект" паузы. a.n7_prim1 { 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 файл: .n7_img_preload { width: 0px; height: 0px; display: inline; background-image: url(http://obovsem.org.ua/img/menu_bg_hover2.gif); /* другие изображеня для предварительной загрузки */ } И в коде HTML-документа, в любой части между <body>...</body> записать такой тег: <div class="n7_img_preload"></div> Пример меню, когда при наведении на один из его пунктов, изображение для этого действия появляется без задержки: Использование совмещенных изображений![]() Чтобы избавиться от предварительной подгрузки изображения средствами CSS, можно воспользоваться вариантом, когда одна картинка содержит 2 изображения. При наведении мыши на пункт меню, необходимо просто сменить, при помощи CSS, положение фонового изображения. Пример меню, когда при наведении на один из его пунктов, изображение для этого действия хранится в одном файле с главной картинкой: Пример организации смещения фона каринки, с использованием CSS, приведен ниже: a.n7_button { 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; }
Опубликовано: 2011/06/05
HTML-код ссылки на эту страницу:
<a href="https://petrenco.com/html_css.php?txt=7" target="_blank">Предварительная подгрузка изображений в CSS</a> 23484
Добавить комментарий
|