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

<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>

Ответ 2 · рейтинг 4 · David says reinstate Monica

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

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>

Ответ 3 · рейтинг 1 · Guffa

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

Ответ 4 · рейтинг 1 · Kobi Hari

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

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

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

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

Ответ 5 · grivescorbett

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