Efficient method to preload larger images

I am building a site which is centered around a slide with a lot of large images. I wanted to preload these images so that users don't experience any loading or too much lag while browsing the site. I came across this page and decided to use JavaScript Method #1. So I basically followed the code given and put this in my footer, of course adding in my own images.

<div class="hidden">
    <script>
        <!--//--><![CDATA[//><!--
        var images = new Array()
        function preload() {
            for (i = 0; i < preload.arguments.length; i++) {
                images[i] = new Image()
                images[i].src = preload.arguments[i]
            }
        }
        preload(
            "/img/slides/bbq.jpg",
            "/img/slides/ext-avt-office.jpg",
            "/img/slides/ext-front-abstract.jpg",
            "/img/slides/ext-front-wide.jpg",
            "/img/slides/front-door.jpg",
            "/img/slides/glass-rill-2.jpg",
            "/img/slides/glass-rill.jpg",
            "/img/slides/kitchen-west.jpg",
            "/img/slides/koi-pond-day.jpg",
            "/img/slides/main-hall-2.jpg",
            "/img/slides/main-hall-wide.jpg",
            "/img/slides/master-bath.jpg",
            "/img/slides/master-doors-day.jpg",
            "/img/slides/pool-area.jpg",
            "/img/slides/pool-back-of-house.jpg",
            "/img/slides/rear-porch.jpg",
            "/img/slides/reglet-detail.jpg",
            "/img/slides/amythist-vanity.jpg",
            "/img/slides/art-and-statue.jpg",
            "/img/slides/avf-office-vanity.jpg",
            "/img/slides/bonsai-tree-night.jpg",
            "/img/slides/chandelier-detail.jpg",
            "/img/slides/childrens-vestibule.jpg",
            "/img/slides/detail-of-vanity-graff-valve.jpg",
            "/img/slides/dining-table.jpg",
            "/img/slides/front-door-detail.jpg",
            "/img/slides/garage-cabinetry.jpg",
            "/img/slides/guest-vanity-detail.jpg",
            "/img/slides/kitchen-waterfall-detail.jpg",
            "/img/slides/koi-pond-night-lantern.jpg",
            "/img/slides/library-angle.jpg",
            "/img/slides/library-bookcase.jpg",
            "/img/slides/meditation-room.jpg",
            "/img/slides/nautical-handrail-detail.jpg",
            "/img/slides/neon-love-seat.jpg",
            "/img/slides/office-bookcase-detail.jpg",
            "/img/slides/playboy-dining-chair-2.jpg",
            "/img/slides/playboy-dining-chair.jpg",
            "/img/slides/rearview-mirror-coffee-table.jpg",
            "/img/slides/westward-chair-close-up.jpg",
            "/img/slides/westward-chairs-and-couch.jpg"
        )
    //--><!]]>
    </script>
</div>

However, given the size of each of these images, it's really slowing down the site. PageSpeed gave me a score of 17 out of a 100 even after optimizing the images. The total mb of all of the images is 13.8. Before it was in the 50-some mb.

Are there more efficient ways to preload huge images like these? Here is the live link.

Update:

So, here's what I decided to try out based on the marked answer below:

$(window).on('load', function() {
    function preload(imageArray, index) {
            index = index || 0;
            if (imageArray && imageArray.length > index) {
                var img = new Image ();
                img.onload = function() {
                    preload(imageArray, index + 1);
                }
                img.src = images[index]['serving_url'];
    }
    /* images is an array with image metadata */
    preload(images);
});

var images = [
    "image1.jpg",
    "image2.jpg",
    "image3.jpg"
];

I'm just confused what goes in the serving_url area.