Заставить загрузку изображения перестать мерцать?

Question

При использовании функции jQuery .hover () для переключения двух изображений я часто нахожу мерцание, когда они включаются при первой загрузке. Я предполагаю, что это потому, что второй из двух не загружен вместе с главной страницей, и поэтому переход не совсем плавный, и есть небольшое мерцание.

Теоретически это затем можно исправить, поместив изображение размером 1 на 1 пиксель с установленным стилем display: none;, который будет загружать изображение при загрузке главной страницы, одновременно кэшируя его и удаляя мерцание.

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

Любые комментарии или советы будут с благодарностью:).

Answer 1

Гораздо лучший способ предотвращения мерцания при наведении изображения - использовать CSS-спрайтов .

Даже если вы решите использовать JavaScript для достижения эффекта зависания (хотя эффект наведения вполне достижим с простым CSS), у вас все равно будет загружено ваше «второе» (зависшее) изображение к тому времени, когда оно должно быть отображено.

Answer 2

Как уже ответил holodoc, CSS-спрайты очень вам помогут ...

Вы просто используете jQuery.hover () для переключения изображений? Если да, вы можете использовать псевдо-селектор CSS: hover.

Answer 3

Вам нужно только предварительно загрузить что-то вроде следующего:

var preloadImg = new Image()
preloadImg.src = "/path/to/image.jpg"

Затем, если он все еще мигает, создайте два HTML-узла с каждым изображением, а затем переключайтесь между ними.