0

I want to make it so that when I perform the following command:

$("input.button").hover(function(){
    $(this).css('background-image', 'url(blah)');
});

There is a period of time where the background is blank. If you notice on http://facebook.com , when you click the button, the background image is loaded right away. Is there anyway to mock this behavior?

Improve this question

1 Answer 1

Reset to default
3

You'll have to pre-load the image on page load:

$(window).load(function(){
    (new Image()).src = 'path/to/img';
});
Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

How will I do this without getting in the way of the user?
Will loading the <img> tag and setting display:none; work as well?
The user will not see it until you use it. The code above will simply load the image into the browser's cache, so that it doesn't have to download it when you need it.
Yes, loading <img> will work but that doing it as suggested tends to be much cleaner. Imagine if you're preloading 20+ images.
@Ken, loading in the image with display:none works well... the only downside is that it forces the user to download the image when the page is loading... js allows it to be done after the initial page load, so the initial page load time will be faster.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.