jquery image preloading at the bottom of the page

Question

I have a jQuery image preloading script like this:

<script>
jQuery(function(){
        $.preload(
       '1.jpg',
       '2.jpg',
       '3.jpg'
        );
    });
</script>

The problem is that the images are dynamically generated according to the current page, so they are not always the same. I have separate pages for the header of the page, the main content (that contains the image generating code) and the footer.

The footer contains the JQuery JS code, so that the page loads faster, but obviously it renders the preloading useless as that is generated in the main content page, before the jQuery.

There's no way for me to include the image preloading after the jQuery is loaded, so my only other option would be to move the jQuery loading into the header of the page, which would however slow the loading times down.

I tried to change it to DOM ready but that doesn't seem to work either, unless I'm doing something wrong:

<script>
jQuery(function(){
$( document ).ready(function() {
        $.preload(
       '1.jpg',
       '2.jpg',
       '3.jpg'
        );
    });
});        
</script>

Is there any way to execute the image preloading only after the jQuery code has been loaded?

Thank you :)

Answer 1

The footer contains the JQuery JS code, so that the page loads faster, but obviously it renders the preloading useless as that is generated in the main content page, before the jQuery.

If your images are part of the HTML that the browser gets, then there's no point in preloading them (as part of the same page) anyways. Preloading is useful for images you think could show up at some point in the future.

So just keep doing that and don't worry about making the current page faster, because you can't.