jquery - Slide an image into the page when the page is loaded

Question

I am trying to slide an image into the page when the page is loaded, I have the script working fine however when the image hasn't been chached it loads the image first, then executes the script. I have tried to preload the images but still am getting the glich.

Here is a testing link: http://luvly.co.nz/space/akatarawa-road.html

And here is the scripts I have been dealing with:

preload

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

        // Usage:

        $(['images/aka/aka1.2.jpg',
            'images/aka/aka2.jpg',
            'images/aka/aka3.jpg',
            'images/aka/aka4.jpg',
            'images/aka/aka5.jpg',
            'images/aka/aka6.jpg', 
            'images/aka/aka7.jpg', 
            'images/aka/aka8.jpg', 
            'images/aka/aka9.jpg', 
            'images/aka/aka10.jpg']).preload();

Slider:

$(function() {
  $("#1-slide").one('load', function () {
    $(this).show("slide", { direction: "right" }, 1000);
  }).each(function() {
    if(this.complete) $(this).load();
  });
});

Also I know I shouldn't be using a number to start an ID but it is just for testing purposes at the moment.