0

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

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

2
  • 2
    Перед </body> вставьте невидимый div и грузите картинки туда. Уровень сложности "newbie", так сказать) Не знаю как сейчас у хромушки - он не любит кэшировать, во всем остальном это сработает. Еще можно психануть и написать $(document).ready(function() { $('html *').trigger('mouseover').trigger('mouseout'); }); ` - `это по воробьям атомной бомбой, но тоже будет работать :)
    – Sh4dow
    8 авг 2013 в 22:26
  • $(document).ready(function() { $('html *').trigger('mouseover').trigger('mouseout'); }); не сработало 9 авг 2013 в 7:41

1 ответ 1

1

JS&HTML:

<img src="normal.jpg" onmouseover="this.src='hover.jpg'" onmouseout="this.src='normal.jpg'"/>
<script>
  var img = new Image();
  img.src='hover.jpg';
</script>

CSS:

a#itm1 {background: url('normal.jpg')}
a#itm1:hover {background: url('hover.jpg')}

Все зависит от того где и как вы делаете этот rollover. Возможны другие варианты...

3
  • Гуглить можно по словам "preload images", например. 8 авг 2013 в 22:34
  • Этот скрипт разве не будет подгружать картинки после наведения? 9 авг 2013 в 7:12
  • попробуйте. картинки будут грузиться сразу все. 9 авг 2013 в 10:20

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.