Jquery functional Error

Question

I'm facing a problem of a jquery function . I want my header not to vanish for a half second while Visitor moves his/her mouse pointer over the header's background image.

http://www.kidsartvalley.com/

Here's the home page where you'll realise that sometimes when you focus over the child's cartoon it says "hello" but though sometimes it becomes invisible for a very short moment. I want it not to be hidden when you moves your mouse's pointer over it.

Answer 1

It's not a jQuery problem.

This happens because the hover image has not been loaded yet when you move your mouse over the header, so the browser has to download it when needed, and it may take some time.

You have basically two options:

1. Preload your images, so that they will be loaded even if not immediately needed, and when you need them they are ready to be displayed.

2. Use a single image containing both the normal image and the hover image, this is called a sprite. This way the full image will be loaded and you won't face this problem anymore. You then need to change the background position to display the other image. You can do this by create a different class in your CSS rules, with the different background position coordinates. With JS you only need to assign this class when the mouse is over the header ti display it.

If you don't want to do it manually, there also online tools which can make the job for you. Usually the use of those tools is discouraged, but for two images of the same size I think they are ok.

Answer 2

This is not related to jQuery, well mostly.

Instead of using a different image for hovered state use a sprite image and change background position with jQuery, that'll allow a seamless transition between two images.

http://css-tricks.com/158-css-sprites/

Answer 3

I think you need to pre-load the :hover version of the image early in your javascript, so that it is already cached when the hover event occurs.

var img = new Image();
img.src = "http://www.kidsartvalley.com/images/child-head-hover.png";