Навигация¶

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

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

<ru-ru>
На примере главной [http://www.myreal.net/|www.myreal.net]<br /> 
Есть 6-ть кнопок, с подложкой-картинками.<br />
Для того, чтобы кэшировать картинки, появляющиеся при наведении курсора, устанавливаем правило для div class="body" основной слой, используемый для расположения всех остальных слоёв. В CSS, вводим следующие правила:
<nowiki> 
<pre class="brush: 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%");
} 
</pre>
</nowiki>
<pre class="brush: plain">
<esc><div class="body">
...
</div></esc>
</pre>

''[http://www.breakof.net/ShowSpecialist.aspx?id=4|Андрей Замятин]''
</ru-ru>
<en-us>
[Login.aspx|Log in] or [Register.aspx|create an account] to start this article
</en-us>

Meta Keywords: браузер, графика, кэш
Meta Description: Пример загрузки изображений разово для дальнейшего использования
Change Comment: