I have this Javascript photo gallery problem: the fade doesn't work, as the image only loads when you click on it.

I want all images first loaded, and only then I want the gallery to be ready.

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
        $('#gallery img').each(function(i) {
    var imgFile = $(this).attr('src');
    
        
    $(this).hover(
        function() {
            $(this).attr('src', preloadImage.src);
        },
        function () {
        var currentSource=$(this).attr('src');
            $(this).attr('src', imgFile);
    }); // end hover
}); // end each

    
// script 7.2 below this line
    $('#gallery a').click(function(evt) {
        evt.preventDefault();
        var imgPath = $(this).attr('href');
        var oldImage = $('#photo img');
        var newImage = $('<img src="' + imgPath + '">');
        newImage.hide();
        $('#photo').prepend(newImage);
        newImage.fadeIn(1000);
        oldImage.fadeOut(1000,function() {
        $(this).remove();
        }); //end fadeOut function
    }); 
    
    //end click
    $('#gallery a:first').click();
    }); // end ready
</script>

edit: how can I make the images load in the background?

To load all image files before the Javascript gallery functions, would I need to replace

$(document).ready(function() {

with

$(document).load {

???

What I mean is: how can you make sure images load in the background?

With this script above they only load when you click on them.