Load a logo image before jPreLoader starts loading other images

I'm using jPreLoader v2 (Link) to preload all of the images that appear on my site. I have a landing page, where PreLoader is called and all of the images are loaded (but not displayed) so that they are cached and appear right away when you go to the next page (the next page is the entire site and quite image intensive so preloading them is necessary). I have a "preload" div on the landing page, which is set to display:none so that the images won't be visible as they are loaded, and it contains all of the image srcs for the images that appear on the next page. So on my landing page I have:

    <div id = "preload" style = "display:none;">
        <img src = "images/image1.jpg">
        <img src = "images/image2.jpg">
        ...
        <img src = "images/image20.jpg">
    </div>

The trouble is, I want to have my site's logo appear above jPreLoader's progress bar on the landing page just before or just when the progress bar starts, but when I add the logo's src to the page, it just gets put into jPreLoader's queue along with the rest of the images and therefore it doesn't get displayed until the progress bar has already started or is close to finishing. What I would like to do is have the logo image load first, and then call on jPreLoader to preload the rest of the images that are in the "preload" div.

Is there a way to have the logo image load completely first before I call jPreLoader to start? I can't just delay the start of jPreLoader because all of the images in the "preload" div will still start to load up at the same time that my logo image is loading.

The only solution that I could think of, which didn't work, was to leave the "preload" div empty so that they wouldn't start loading right away, let the logo image load normally, and then use a function with a setTimeout delay of 5 seconds to give the logo time to load, and then append all the image HTML to the preload div and then call jPreLoader. Here's what I tried:

    <script type = "text/javascript">
    $(document).ready( function() {

    setTimeout(function() { 

      var images = "<img src = 'images/image1.jpg'> 
                    <img src = 'images/image2.jpg'>
                    <img src = 'images/image3.jpg'>
                    ...
                    <img src = 'images/image20.jpg'>";

    $("#preload").append(images);

        $('body').jpreLoader({loaderVPos: '50%', autoClose: true, onetimeLoad: true }, function() { 
            $(window.location).attr('href', 'site.php');
        });

    }, 5000); 

    });

Of course, the above didn't work when I tried it, which is why I'm here. Does anyone know how to do what I'm trying to do? Ideally, jPreLoader should start loading all of the images in the "preload" div as soon as the logo finishes loading, rather than havean arbitrary delay such as 5000 milliseconds as I did above. Any and all help will be greatly appreciated. Thanks!