delay in hover

delay in hover

I did a very straightforward hover script which replaces a map with a different map when the user hovers over a link and goes back to the default map when the user mouseleave's.   There are several such links on the page and they all  behave exactly as I programmed. 

  1.    jQuery('a.roll').hover(
             function(){
                jQuery('div#mapp').css('backgroundImage', 'url(/wp-content/images/' + jQuery(this).attr('id') + '.jpg)');
             },
             function(){
                jQuery('div#mapp').css('backgroundImage','url(/wp-content/images/blank_map.jpg)');
            });    //end hover







The problem is the load delay.  The first time you hover on a link, there is a noticeable delay where the default map goes away leaving a white space, and is eventually replaced by the rollover map. 

I could preload all the replacements that would make a very slow initial page load.  I'd have to put up one of those "loading" animations, and  the client isn't sure they want to do that. 

Is there something I could do to the hover script to keep the original graphic visible and not do anything until the new graphic has loaded?  It would still delay the rollover effect but it might not be as nasty as that white flash.