Эффект наведения не работает нормально

Question

Как загрузить исходное изображение, чтобы при наведении курсора на верхнюю часть изображения оно автоматически менялось, не отображая белый фон, а затем загружая исходное изображение? Есть ли код, который загружает исходное изображение, когда загружается моя веб-страница? Пожалуйста, дайте мне знать. мой код:

#middlefoto{
    background-image:url(../images/middleblack.jpg);
    margin-left:1px;
    height:158px;
    width:333px;
    }
#middlefoto:hover{
    background:#fff url(../images/middlecolor.jpg) 0 0 no-repeat;
    }

Answer 1

Причина, по которой вы на мгновение видите пустой фон, заключается в том, что наведенное изображение еще не было загружено с сервера. Чтобы избежать этого, предварительно загрузите изображения. Есть несколько способов сделать это, но концепция та же: заставить браузер загрузить изображение до того, как оно действительно понадобится. Вот простой способ сделать это с помощью JavaScript:

function preloadImages(sources)
{
    var img = new Image();
    for (var i = 0; i < sources.length; i++) {
        img.src = sources[i];
    }
}

preloadImages([ '../images/middlecolor.jpg', 'image2.jpg', 'image3.jpg' ]);

Answer 2

Используйте спрайты с позиционированием.

Найти больше информации в школах W3

Answer 3

Включите изображение в элемент вне экрана (отодвиньте его от экрана с помощью CSS). Это заставит браузер загрузить изображение, поэтому оно должно быть готово к опрокидыванию. Вы можете очистить изображения за пределами экрана после загрузки страницы.

<img src="rollover image" class="preloader" style="position:absolute; margin-left:-99999px" />

(на самом деле не используйте встроенные стили) Тогда, если вы используете jquery

$(document).ready(function(){ $('.preloader').remove(); });

очистить.