JQuery Issue... Can't get all images to load at once
===

I'm currently working on a new website and I'm having a couple of issues with our website not loading all the images at once in JQuery.

The code that is in the HTML file in order to call the JQuery script is just under the js files at the top of the document and shows as follows:

    <script type="text/javascript">
    $.fn.cycle.transitions.fadeOutWaitFadeIn = function($cont, $slides, opts) {
        opts.fxFn = function(curr, next, opts, after) {
            $(curr).fadeOut(opts.fadeSpeed, function() {
                $(next).delay(opts.delayBetweenFades).fadeIn(opts.fadeSpeed, function() {
                    after();              
                });
            });
        };
    };	
    </script>

I've looked into this and also tried the following bit of code but the four images in our banner still seem to load one under the other and then bunch into one once the page has fully loaded.

    <script type="text/javascript">
    $(window).load(function() {
    $.fn.cycle.transitions.fadeOutWaitFadeIn = function($cont, $slides, opts) {
        opts.fxFn = function(curr, next, opts, after) {
            $(curr).fadeOut(opts.fadeSpeed, function() {
                $(next).delay(opts.delayBetweenFades).fadeIn(opts.fadeSpeed, function() {
                    after();              
                });
            });
        };
    };	
    });
    </script>

Theres also a JS file that we call in with all the JQuery in for how the banner moves. This has the following code in it:

    $(window).load(function() {
    	$('#promo').cycle({
    		fx: 'scrollHorz',
    		timeout:    4000,
    		speed:      800,
            delay: 600,
    		easing:'easeOutExpo',
    		next: '#promonav .next',
    		prev: '#promonav .prev',
    		height: 490
    	});
    	
    	$('#bannertext').cycle({ 
    		fx: 'fadeOutWaitFadeIn',
            fadeSpeed: 'slow',
            delayBetweenFades: 1000,
    		timeout: 4000,
    		next:   '#promonav .next', 
    		prev:   '#promonav .prev'
    	});
    	
    	$('#logoslide').cycle({
    		fx: 'scrollHorz',
    		timeout:    4000,
    		speed:      500,
                    delay: 600,
    		next: '#promonav .next',
    		prev: '#promonav .prev',
    		height: 134
    	});
    });
    	

I really can't figure out what the problem is and have spent about 4 hours trying to figure it out. I'm sure I must just be doing something silly... Any help would be fantastic!!

Many thanks,

Lewis