Background Image Rotator

I need some suggestions and ideas to improve a background image rotator.

The script as of now is very basic but I'm looking to change 2 thing.

1. I want the images to fade into each other.
2. I need to be able to preload the images so it doesn't have the delay when loading them when they first di开发者_开发问答splay.

Thoughts?

<script type="text/javascript">
    var images = ['bg1.png', 'bg2.png', 'bg3.png'];
    var curImage = 0;
    function switchImage()
    {
        curImage = (curImage + 1) % images.length
        document.body.style.backgroundImage = 'url(images/' + images[curImage] + ')'
    }
    window.setInterval(switchImage, 5000);
</script>

Example: http://www.nickersonweb.com/demo/PMS/index.html

---

For fading, try fadeOut() and fadeIn() with jQuery. (Demo and documentation here: http://api.jquery.com/fadeOut/, http://api.jquery.com/fadeIn/)

For preloading, trying making an invisible image somewhere on the page, like this:

<img src='bg1.png' width="0" height="0">

Another way to preload the images is using javascript to create an image object. Here's the code I used for something similiar.

var imgnum=0;
var imgsrcs=new Array("imgs/img1.jpg","imgs/img2.jpg")
var fimgs=new Array();
var imgid="imgid";
function timedCount()
  {
    $("#"+imgid).fadeTo(1000,0,function(){newimage();
});
    setTimeout(timedCount,5000);
  }
function newimage()
{
imgnum=(imgnum+1)%imgsrcs.length;
document.getElementById(imgid).src=fimgs[imgnum].src;
$("#"+imgid).fadeTo(1000,1);
}
function initializeslideshow()
{
    var i;
    for(i=0;i<imgsrcs.length;i++)
    {
        fimgs[i]=new Image(270,270) 
        fimgs[i].src=imgsrcs[i];
    }
}
initializeslideshow();
setTimeout(timedCount,5000);

You'll need to link to jQuery (and jQuery UI, I think) to use the code above, like this, for instance:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js"></script>