Search code examples
jqueryimagehoverpreloadrollover

HTML JQuery - Load images fast?

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?

Solution

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

    $(window).load(function(){
    (new Image()).src = 'path/to/img';
});