элемент наведения мыши мерцает

Question

У меня есть изображение на веб-странице, и когда пользователь наводит на него курсор, появляется другое изображение. При наведении курсора на появляющееся изображение оно мерцает.

Кто-нибудь знает, почему это так?

Tony

ОБНОВЛЕНИЕ: первое изображение не исчезает при наведении, только другое (меньшее) изображение появляется сверху в левом верхнем углу. При перемещении по этому меньшему изображению появляется мерцание.

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

Answer 1

Поскольку браузер загружает новое изображение. Лучшее решение - объединить оба изображения в одно и либо просто использовать CSS для изменения положения фона на :hover, либо (для IE6 и не привязанных элементов) изменить положение фона с помощью JS.

Answer 2

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

Answer 3

в IE? IE известен тем, что не кэширует изображения, которые загружаются динамически (либо с помощью CSS :hover, либо из-за событий Javascript). Вы можете использовать CSS-спрайты (в основном, используя один файл изображения для отображения обоих изображений и используя позиционирование, чтобы показать одно или другое; учебник , связанный Майк Робинсон ), или использовать предварительную загрузку изображения:

var preloadImg = document.createElement('img');
preloadImg.src = 'path/to/image';

Редактировать: и другие браузеры будут делать то же самое при первой загрузке. IE просто может продолжать делать это на каждом переключателе.

Answer 4

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