Предварительная загрузка изображений с помощью CSS

Одним из способов избавится от предварительной загрузки изображений с помощью JavaScript является загрузка изображения с помощью css-стилей:

Разберем на примере:

У нас на сайте есть меню, в котором мы хотели бы сменить фоновые изображения с помощью CSS-стилей.

Проблема заключается в том, что при наведении курсора на ссылку изображение для класса a:hover будет запрошено с сервера и пользователь нашего сайта будет ждать пока картинка загрузится и отобразится ему.

Пока картинка грузится пользователь ничего не увидит.

Один из способов обхода этой проблемы является загрузка нескольких фонов для ссылки одним изображением за раз. То есть мы загружаем одно изображение и работаем потом только с ним.

a#menu { background: transparent url("backimg.gif") no-repeat 0 0 ; }
a#menu:hover { background-position: 0 -15px; }
a#menu:active { background-position: 0 -30px; }

Однако, в данном случае существует проблема Internet Explorer'а, который всякий раз при смене фона на новое изображение все же пытается его загрузить несмотря ни на что. Для обхода этой, не совсем уж удобной для нас детали, нужно сделать так чтобы 2-го фона просто не было, а то есть:

#menu div { background: url("defimg.gif") no-repeat 0 0; }
#menu div a:hover { background: url("backimg.gif") no-repeat 0 0; }
#menu div a:active { background: none; }

Мы устанавливаем фон для внешнего тега, в котором находится наша ссылка. А у ссылки фон не меняем а просто его убираем.

Данное решение поддерживается большинством используемых браузеров: IE5+, Mozilla, Opera, Safari, и совместимых с ними.