У меня есть интерактивное изображение (логотип), которое я хочу определить в HTML (а не в CSS), поскольку это логотип, который находится в меню, должен быть масштабирован с текстом, а также является смысловой частью содержимого.Как я могу избежать мерцания при изменении изображения для другого с помощью MouseEvent?
Я хочу, чтобы изменить на парения так:
<img src="logo.svg"
onmouseover="this.src='logo_hover.svg'"
onmouseout="this.src='logo.svg'">
Проблема заключается в том, что меню и логотип мерцает, когда я парить изображение. Это не всегда происходит, но, похоже, это связано с тем, что требуется немедленное масштабирование нового изображения. У меня есть width: 100%
на логотипе и width: 5em
, установленных на div, который его удерживает.
Как я могу избежать этого мерцания? Должен ли я задать как ширину, так и высоту изображения, если да, то как мне узнать, какую высоту должно иметь изображение? Или есть ли другой способ избежать «удивления» браузера при загрузке нового изображения?
Что я triend до сих пор:
Я уже пытался поджать изображение с JavaScript, а также с <link rel='prefetch'>
тегом, но мерцающие все еще происходит.
Почему css не подходит? Вы можете использовать изображение и установить его как фоновое изображение div. Это изображение будет слишком большим и будет содержать фотографии, которые вы хотите отобразить. Вы должны контролировать видимую часть с помощью css, с помощью функций mouseover/mouseout, просто изменяя смещение изображения, показанного в левом верхнем углу. Поскольку у вас есть только одно изображение, оно всегда будет загружено (загрузка происходит из-за вашего фликкера) и может измениться смещение в мгновение ока. (Вот как SO делает свои значки - они находятся в одном файле) – enhzflep
@enhzflep Очень хорошая идея, но я думаю, что еще правильнее сохранить изображение, определенное в '', что вы думаете? См. Мое редактирование выше для размышлений вокруг этого. – PetaspeedBeaver
Ну, я видел, как обычно используется трюк. Он используется по нескольким причинам (0), чтобы сократить количество запросов на сервер (1), чтобы сократить переданные переданные байты, поскольку вам нужно отправить только один заголовок изображения (2), он помогает сохранить все ваши изображения вместе (3) он избегает мерцания, так как 2-е изображение, как гарантируется, уже загружено (4), вы можете добиться дополнительной экономии полосы пропускания, так как есть больше шансов получить хорошее сжатие на изображении. Если вы перейдете на страницу http://cdn.sstatic.net/Sites/stackoverflow/img/sprites.svg?v=bc7c2f3904bf, вы можете увидеть один из spritemaps SO. – enhzflep