OnMouseOver Мерцание при навигации

Question

Я создал выпадающую навигацию, используя CSS и немного Javascript.У меня возникают проблемы с мерцанием, когда пользователь впервые использует навигацию.В некоторых браузерах это происходит чаще, чем в других (Chrome).Это действительно раздражает, и я впервые использую любой javascript, в частности OnMouseOver и OnMouseOut для навигации.Вот ссылка на навигацию: http://demo2.reclaimdesign.com/testnav.html. Есть ли способ это исправить?

Спасибо, DH

Answer 1

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

Я бы посмотрел либо на предварительную загрузку изображений с помощью Javascript, чтобы они были готовы к рок-н-роллу, когда пользователь наводит указатель мыши на элементы, либо (еще лучше) использовал спрайты для включения всех парящих / неиспользуемых элементов. наведите курсор на нужные вам изображения на одном изображении , которые можно перемещать с помощью CSS, как «правило слайдов», для достижения того же результата.

На StackOverflow есть много примеров, касающихся предварительной загрузки изображения, но вот пример того, как этого можно достичь:

var image_to_preload = new Image();
image_to_preload.onload = function(){ // could do something here... };
image_to_preload.src = "/path/to/image.jpg";

Как я уже сказал, я бы предпочел использовать спрайты, и снова я подозреваю, что есть множество примеров, но в качестве примера для вашего меню элементы выглядят так, как будто они имеют размер 110 x 35 пикселей, поэтому, если вы создали изображение размером 110 x 70 пикселей (оба состояния при наведении изображения объединены в одно изображение), которое можно «сдвинуть» с помощью CSS:

.menuAllProducts
{
    width: 110px;
    height: 35px;
    background-image: url(background-sprite.jpg);
    background-position: 0px 0px;
}

.menuAllProducts:hover
{
    background-position: 0px -35px;
}

Я надеюсь, что это помогает и имеет смысл! Удачи! :)

Answer 2

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

«Мерцание» происходит из-за того, что изображение ролловера необходимо загрузить. Лучший способ - использовать одно изображение в качестве фона и использовать CSS для перемещения фонового изображения при наведении. Это известно как «раздвижные двери».

Вот одна ссылка с учебником. Но есть десятки, если вы Google.