Why is there a slight delay when switching images on hover?

Question

Hello I have a div with a background image on my website set up so when you hover over it, it changes background images.

It works correctly but the only issue is that there is a slight delay when switching images, probably a 0.2 second delay. So when you hover over it, the div turns blank for 0.2 seconds and then the new image appears.

Does anyone know what is causing this issue? I am thinking it has to do with the speed in which the hover image loads, if that is the case then there probably isn't a solution for this issue and I will just have to live with it.

There is no javascript or jQuery associated with the div at all.

Here is my code.

HTML:

<div class="video-button">

</div>

CSS:

.video-button {
    background: url('images/playbutton.png') center center no-repeat;
    height: 113px;
    width: 113px;
}

.video-button:hover {
    background: url('images/playbutton-h.png') center center no-repeat;
}

I would use a sprite. http://stackoverflow.com/questions/4333695/css-hover-state-images-cache — keyboardSmasher, Aug 13 '16 at 07:39
@keyboardSmasher thanks for your reply, I will use a sprite if that is the only solution. — cup_of, Aug 13 '16 at 07:44
If making a sprite won't work, changing only the `background-image` on hover might help. If you change the `background`, you reset all its properties, including the background-color. — Mr Lister, Aug 13 '16 at 08:03

score 1 · Answer 1 · answered Aug 13 '16 at 08:28

1

Load that second image in another div that is out side the screen view (not visible) .

Once that image is loaded browser won't need to call it again, it will use cache to show it on hover.

answered Aug 13 '16 at 08:28

Shahrukh Ahmad

133
1
1
10

where do you suggest putting the image? – cup_of Aug 13 '16 at 21:02
well I suggest image could be put above the body but use absolute position keep its position (top) above from visible area , in this way image won't be visible on screen and your View will be as it is. – Shahrukh Ahmad Aug 15 '16 at 05:49

Why is there a slight delay when switching images on hover?

1 Answers1