Предварительная подгрузка изображений в 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);
                 }

Пример меню, когда при наведении на один из его пунктов, изображение для этого действия появляется с задержкой:

Меню 1 Меню 2 Меню 3 Меню 4 Меню 5

Следует учесть, что после перезагрузки страницы, изображение, которе появляется при наведении мыши на пунк меню, может остаться в кеше браузера и эффект задержки виден не будет.

Предварительная подгрузка изображений в 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>

Пример меню, когда при наведении на один из его пунктов, изображение для этого действия появляется без задержки:

Меню 1 Меню 2 Меню 3 Меню 4 Меню 5

Использование совмещенных изображений

Чтобы избавиться от предварительной подгрузки изображения средствами CSS, можно воспользоваться вариантом, когда одна картинка содержит 2 изображения. При наведении мыши на пункт меню, необходимо просто сменить, при помощи CSS, положение фонового изображения.

Пример меню, когда при наведении на один из его пунктов, изображение для этого действия хранится в одном файле с главной картинкой:

Меню 1 Меню 2 Меню 3 Меню 4 Меню 5

Пример организации смещения фона каринки, с использованием 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="http://petrenco.com/html_css.php?txt=7" target="_blank">Предварительная подгрузка изображений в CSS</a>
14976
Добавить комментарий
Ваш e-mail: (не виден посетителям сайта)
Ваше имя:
Комментарий:
Символы с картинки:
Только выделенные поля формы добавления комментариев обязательны к заполнению.