Подгрузка изображений

[artefakt777]

Сделал так, что при наведении курсора на изображение, оно меняется на другое изображение.
Но при наведении оно подгружается не сразу.
Собственно как сделать, чтобы этой подгрузки не было и менялось оно мгновенно?

 

[01K]

Побольше информации!
Чем сделано? JQuery? Код в студию

 

[NoName013]

Если делали с помощью псевдоклассов, то для решения подобной "проблемы" используются css спрайты. На хабре об этом неплохо написано Для просмотра ссылки Войди или Зарегистрируйся да и вообще много информации

 

[artefakt777]

Сделано стилями css:

 a.t_l {
    background: url(images/top_left.png);
    background-repeat: no-repeat;
    display: block; /*  Рисунок как блочный элемент */
    width: 195px; /* Ширина рисунка */
    height: 74px; /*  Высота рисунка */
  }
  a.t_l:hover {
    background: url(images/top_left2.png);
    background-repeat: no-repeat;
    display: block; /*  Рисунок как блочный элемент */
    width: 195px; /* Ширина рисунка */
    height: 74px; /*  Высота рисунка */
  }

 

[NoName013]

Это и называется "псевдокласы". Читайте ту статью что я скинул выше.

Вот кстати еще одна полезная ссылочка Для просмотра ссылки Войди или Зарегистрируйся
Последний пример как раз ваш вариант.

 

[artefakt777]

Я так понимаю тут вариант с одной кратинкой, т.е. при наведении меняется только позиция отображения этой картинки.Такой вариант не подходит, т.к. придется редактировать достаточно много изображений и переписывать css.

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

 

[NoName013]

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

Возьмем за пример статью с Для просмотра ссылки Войди или Зарегистрируйся
Есть одна картинка, на которой нарисованы все кнопки

И есть css код, который описывает псевдокласы.

#home a:hover{background: url('img_navsprites_hover.gif') 0 -45px;}
#prev a:hover{background: url('img_navsprites_hover.gif') -47px -45px;}
#next a:hover{background: url('img_navsprites_hover.gif') -91px -45px;}

В этом коде, как background выступает одна и та же картинка (которая больше чем видимая обрасть), НО позиция фона background-position разная. В результате пользователь видит разные части этой картинки.

Фактически никакой загрузки изображения нету. Есть только одно изображение, которое мгновенно смещается при наведении на него курсора.

 

[Sirkukk]

Можно еще использовать прелоад для картинок (Для просмотра ссылки Войди или Зарегистрируйся), но спрайты будут оптимальнее.
Вообще за счет спрайтов можно ускорить загрузку страницы, постарайтесь как можно больше пиктограмм разместить через спрайты.

 

[icydrago]

Проще все на фон потавить анимашку загрузки. При наведении картинка пропадает - будет виден фон.

 

[Gtnz]

1. можно предзагрузку сделать с помощью css:

body:after {
content: url('img.src') url('img.src');
display: block;
position: absolute;
width: 0;
height: 0;
overflow: hidden;
}

2. вставить как inline img обе картинки

О остальных решениях ответили выше (sprite и js)