Загрузка изображений в кэш браузера средствами CSS

Изменено 2010/02/17 00:23 Administrator — Категории страницы: CSS, HTML, Пример кода

На примере главной www.myreal.net
Есть 6-ть кнопок, с подложкой-картинками.
Для того, чтобы кэшировать картинки, появляющиеся при наведении курсора, устанавливаем правило для div class="body" основной слой, используемый для расположения всех остальных слоёв. В CSS, вводим следующие правила:

div.body {
    /* чтобы картинки только загрузились в кэш*/
    width: 0px;
    height: 0px;
    /* хак для старых версий IE*/
    clip: rect(0 0 0 0);
    display: inline;
    /* картинки*/ 
    background-image: url("../i/Eng/webmailmean.png");
    background-image: url("../i/Eng/questions1mean.png");
    background-image: url("../i/Eng/questions11mean.png");
    background-image: url("../i/Eng/questions2mean.png");
    background-image: url("../i/Eng/questions21mean.png");
    background-image: url("../i/Eng/questions12mean.png");
    /* значение, которое будет использоваться браузером, последнее*/
    background-image: none;
    background:transparent;
    /* возвращаем нормальные размеры слоя*/
    width:auto;
    height:auto;
    /* хак для IE, устанавливающий размер основного слоя*/
    width: expression(((document.documentElement.clientWidth || document.body.clientWidth) < 800)? "800px" : "100%");
}

<div class="body">
...
</div>

Андрей Замятин