Предварительная загрузка невидимых элементов страницы?

[eVErl@Sting]

Есть сайт, на сайте есть блок, в котором есть картинки-ссылки которые меняются при наведении мышки и нажатии мышки (что то типа меню с кнопками).

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

Вот пример HTML кода:

<td width="135" height="135">
<a href="#" class="d15" onfocus="this.blur()"></a></td>

Вот CSS:

a.d15:link { background: url(images/catalog_content_15.png); display: block; width: 135px; height: 135px; }
a.d15:hover { background: url(images/catalog_content_15h.png); display: block; width: 135px; height: 135px; }
a.d15:active { background: url(images/catalog_content_15a.png); display: block; width: 135px; height: 135px; }
a.d15:visited { background: url(images/catalog_content_15.png); display: block; width: 135px; height: 135px; }

Я попробывал прописать в коде страницы даже вот это:

<div style="position: absolute; display: none"><img src="images/catalog_content_15h.png"></div>
<div style="position: absolute; display: none"><img src="images/catalog_content_15a.png"></div>

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

В IE у меня эти картинки вообще подгружаются при каждом новом наведении мышки по новой, даже без сохранения ан компе.

В Опере при действии подгружается в комп, а при дальнейшем уже с компа грузятся.

В Сафари, ФФ и Хроме все ок.

Да, плс, нулевой фрейм не предлогать!

Edited August 26, 2010 by eVErl@Sting

[Searcher]

Ну с нулевым фрэймом это что-то из прошлой жизни...

Самый распространенный сейчас способ - спрайты. Т.е. все состояния кнопки находятся в одной картинке, просто на разных позициях, а при hover, active и пр. вы просто меняете положение бэкграунда.

[Great Rash]

Можно еще кешировать все картинки проставив их в див с position: absolute; и left: -9999px;.

[Searcher]

Да, бывают ситуации, где спрайты не помогают, тогда либо скрипт, либо левый див. Но здесь лучше спрайтами, задача простая, аккуратнее будет ))

[eVErl@Sting]

я Вас понял, тоже думал об этом, но так как не разу еще незаморачивался объединением нескольких картинок в одной и вызыванием определенной области этой картинки при определенном действии, отложил, видимо все таки без этого в моем случае не как и пора набираться опыта в этом деле мне…

а так пока ждал ответа появились задумка с загрузкой однопиксельных картинок этих на страницу в шапке с margin -150..но этот вариант кажется мне диким и изощренным и не профессиональным..

[mishka]

Можно еще кешировать все картинки проставив их в див с position: absolute; и left: -9999px;.

И top:-9999px тоже не помешает.

[Great Rash]

И top:-9999px тоже не помешает.

Нафига?

[SANNY_95]

Я если честно не пробовал, но мне кажется можно это линком присоединить, как стиль, например.

[mishka]

И top:-9999px тоже не помешает.

Нафига?

Обычно такие блоки ложат в самом конце html документа, перед закрывающим тэгом </body>. Вот если его на абсолют и только left:-9999px, то внизу будет свободное пространство равное высоте этого блока. Он хоть и на абсолюте, но всеравно потянет бади (аналогично блоки на абсолюте дают дополнительный скролл справа). Поэтому top:-9999px непомешает

Я если честно не пробовал, но мне кажется можно это линком присоединить, как стиль, например.

Можна спросить - куда вы стилями картинки будете цеплять? Создавать элементы и на них (на один элемент один бг)? Не проще это все через <img src="" /> загружать как предложил Great Rash?

[eVErl@Sting]

Searcher

Большое спасибо за совет (со спрайтами), вечером легко во всем разобрался и реализовал на сайте как надо, все работает, я доволен.

Edited August 26, 2010 by eVErl@Sting

[Searcher]

Пожалуйста! ))

[Great Rash]

Обычно такие блоки ложат в самом конце html документа, перед закрывающим тэгом </body>. Вот если его на абсолют и только left:-9999px, то внизу будет свободное пространство равное высоте этого блока. Он хоть и на абсолюте, но всеравно потянет бади (аналогично блоки на абсолюте дают дополнительный скролл справа). Поэтому top:-9999px непомешает

А, ну в таком случае конечно не помешает. Правда я обычно подобные блоки в самом верху вставляю.