Прокрутка изображения HTML - изображение не полностью загружено перед прокруткой?

У меня есть изображение (вверху слева как домашняя ссылка), и я использую CSS: hover, чтобы изменить изображение при наведении курсора.

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

Как исправить это, чтобы переход был плавным? Есть ли способ предварительно загрузить изображение?


javascript browser html rollover
person Pauly Dee    schedule 02.01.2011    source источник
comment
возможный дубликат Каков наилучший способ предварительной загрузки несколько изображений в JavaScript? -- И оценка приемлемости низкая. ;-\   -  person Brad Christie    schedule 03.01.2011

Ответы (5)


arrow_upward
1
arrow_downward

<сильный>1. Ответ: используйте CSS-спрайты.

<сильный>2. Ответ: Или создайте что-то вроде этого:

<a href="link.html">

<!-- Remove this img-tag if you don't have a 'nohover' background -->
<img alt="image" src="images/image.png" class="nohover" />

<img alt="imagehover" src="images/image.png" class="hover" />

</a>

И CSS:

img.nohover {

граница:0

}

img.hover {

граница:0;

дисплей: нет

}

а: наведите img.hover {

дисплей: встроенный

}

а: наведите курсор img.nohover {

дисплей: нет

}

person Arxisos    schedule 02.01.2011

arrow_upward
4
arrow_downward

Есть два варианта, которые я могу придумать, навскидку:

  1. css спрайты изображений или
  2. размещение изображения :hover в скрытом div другом месте страницы.

1, спрайты:

Для CSS Sprite используйте одно фоновое изображение для домашней ссылки и просто измените его положение на :hover:

#home {
    background-image: url(http://example.com/spriteOne.png);
    background-repeat: no-repeat;
    background-position: 0 100px;
}

#home:hover {
    background-position: 0 200px;
}

Однако для этого требуется установить высоту для элементов с фоном css-sprite.

2, скрытые элементы предварительной загрузки:

#home {
    background-image: url(http://example.com/bg.png);
    background-repeat: no-repeat;
    background-position: 0 100px;
}
#home:hover {
    background-image: url(http://example.com/hoverBg.png);
}
#preload,
#preload img {
    display: none;
}

<div id="preload">
    <img src="http://example.com/hoverBg.png" />
</div>
person David says reinstate Monica    schedule 02.01.2011
comment
Я думаю, что спрайты CSS — это, безусловно, путь. - person James Long; 03.01.2011
comment
@ Джеймс, я бы согласился; это скорее чище, чем жесткое кодирование множества изображений, по сути, в системе постраничного кэширования. С другой стороны, требование знать заранее, насколько большим разрешено быть каждому элементу, может быть ограничительным (и, безусловно, ограничивающим возможности для гибких макетов, хотя, я полагаю, то же самое делает и здравый смысл). - person David says reinstate Monica; 03.01.2011
comment
Хотя это действительно интересное решение, мне интересно, почему никто не предложил JavaScript... просто сказал... лол - person JCOC611; 03.01.2011
comment
@ JCOC611: мое собственное объяснение этого заключается в том, что я чувствую, что использование JS излишне усложняет вещи, плюс: я не настолько хорош в ванильном JS... =/ - person David says reinstate Monica; 03.01.2011
comment
лол, с моей точки зрения, сделать это с помощью простого CSS несколько сложнее, чем JavaScript, но это потому, что я люблю JavaScript! XD - person JCOC611; 03.01.2011
comment
Иди со спрайтами. Это уменьшает количество необходимых HTTP-запросов, что может показаться не таким уж большим делом, пока вы не попытаетесь просмотреть свою страницу через небольшой канал. - person chprpipr; 03.01.2011

arrow_upward
1
arrow_downward

Я обнаружил, что метод, который действительно хорошо работает для ролловеров, — это использование спрайтов CSS, то есть использование изображения, которое содержит как исходную, так и ролловерную версии изображения. Таким образом, обе версии загружаются одновременно, и переход между ними — это всего лишь вопрос изменения стиля background-position.

person Guffa    schedule 02.01.2011

arrow_upward
1
arrow_downward

Один из способов сделать это — добавить на свою страницу невидимое изображение с тем же URL-адресом. Таким образом, добавляя следующее в начало тела документа, вы фактически даете указание браузеру загрузить это изображение как можно скорее.

<IMG src="rolloverImage.png" style="display:none">

Хотя этот тег остается частью вашего документа, он не отображается и даже не отображается из-за настроек «display:none». Вы даже можете прослушать его событие загрузки и полностью удалить тег из DOM после его загрузки, чтобы не допустить попадания «мусора» в документ. Как только изображение загружается в память, оно автоматически повторно используется каждый раз, когда вы обращаетесь к одному и тому же URL-адресу, поэтому, как только вы установите источник другого изображения на тот же URL-адрес, оно будет загружено из памяти.

Надеюсь, это поможет, Коби

person Kobi Hari    schedule 02.01.2011

arrow_upward
0
arrow_downward

Поместите изображение в div со стилем, установленным на { height: 0; overflow: hidden; }, это должно заставить браузер предварительно загрузить изображение.

person grivescorbett    schedule 02.01.2011