No image between jquery changing background image of div

Question

I´m using jquery to change the background image of a div.

Scene: 5 links, every link has an ID who is taken by jquery changing, when the mouse is OVER the link, the background image of the DIV and putting again the original background image when is out.

So… When page LOAD…

DIV background image = 1.png

When mouse is over LINK 1, DIV background image = 2.png

When mouse gets out, DIV background image returns to 1.png

(The same with the others links… 2,3,4,5)

So...

For normal state, the background image is: 1.png When changes... 2.png, 3.png, etc... And when the mouse is out, 1.png again.

It´s working well, but… Between the images, mostly when I refresh the browser or change the position (cursor) of the web, appears a “blank background” (no image).

I thought that this can be resolved through a preload script, pre loading the images that I´ll use (ex: 1.png, 2.png, 3.png… etc)

But… Still happening the same. Anyone knows how can I resolve this?

Thanks for your time.

I just put the JQUERY for the changes and the preload because the rest doesn´t have much importance. (At least, I think so)

JQUERY CODE

<script type="text/javascript">
$(document).ready(function() {
    $("#link1").hover(
    function() {
        //mouse over
        $('.divi').css('background-image', 'url("2.png")');
    }, function() {
        //mouse out
        $('.divi').css('background-image', 'url("1.png")');
    });
});


$(document).ready(function() {
    $("#link2").hover(
    function() {
        //mouse over
        $('.divi').css('background-image', 'url("3.png")');
    }, function() {
        //mouse out
        $('.divi').css('background-image', 'url("1.png")');
    });
});

// The same for link3... ... ...

<script type="text/javascript">
$.preloadImages = function() {
  for (var i = 0; i < arguments.length; i++) {
    $("<img />").attr("src", arguments[i]);
  }
}

$.preloadImages("1.png","2.png","3.png");

// The same for the rest of the images