My b2evolution Version: 3.3.3

I'm a bit confused how to do this. I've got a slideshow working using jQuery and Nivo Slider (http://nivo.dev7studios.com/). You can see the results here: (http://operationsomething.com/blog4.php). However, you'll notice that when the page loads, all the images stack up for a second before beginning the slideshow. I've learned I need to preload the images and have found the following suggestion on how to do this:

Either use:

function preload(arrayOfImages) {
    $(arrayOfImages).each(function(){
        $('<img/>')[0].src = this;
        // Alternatively you could use:
        // (new Image()).src = this;
    });
}

// Usage:

preload([
    'img/imageName.jpg',
    'img/anotherOne.jpg',
    'img/blahblahblah.jpg'
]);

or use:

$.fn.preload = function() {
    this.each(function(){
        $('<img/>')[0].src = this;
    });
}

// Usage:

$(['img1.jpg','img2.jpg','img3.jpg']).preload();[url]

Since I have absolutely no idea what I'm doing, I can't seem to figure out how to get either of these chunks of code to work. For starters, where do I put it? Does someone have experience preloading images who can help with this?

...Also, how would I go about centering this whole deal on the page? I tried using <div align="center"> but that didn't seem to work.