Preloading images linked to from page

Question

I would like to improve the loading speed of the Shadowbox popup images on this page

Basically, all images opened by Shadowbox are linked to from this page:

<a href="images/illustration/garden1.jpg" class="garden"></a>
<a href="images/illustration/garden2.jpg" class="garden"></a>

etc etc.

I know how to preload images by listing them like this:

var images = [ 'image1.jpg', 'image2.jpg', ]

$.fn.preload = function() {
    this.each(function(){
        $('<img/>')[0].src = this;
    });
}

$(document).ready(function(){
 $(images).preload();
 });

Is there a way to pull all the href values into the preload array? If so, how might I exclude links to other documents? Or am I going about this all wrong?!

Thanks.

Answer 1

The below file will find all of the images found in the selected folder (inputted into the listImages function call). Save this as all_images.php in the directory you wish to crawl for images:

<?php
function listImages($dir){
    $ffs = scandir($dir);
    foreach($ffs as $ff){
        if($ff != '.' && $ff != '..' && strstr($ff, '.png') || strstr($ff, '.jpg') || strstr($ff, '.gif') || strstr($ff, '.jpeg')){
            echo '"/images/'.$ff;
            if(is_dir($dir.'/'.$ff)) listFolderFiles($dir.'/'.$ff);
            echo '", ';
        }
    }
}
echo '[ ';
listImages('images');
echo ']';
// output: ["image1.png", "image2.png"] etc.
?>

Then, to preload these images, load the all_images.php file into a variable and preload the generated string of image files it contains:

<script src="jquery.js"></script>
<script type="text/javascript">
// put contents of all_images.php file into variable 'images'
$.get('/all_images.php', function (data) {
    images = $(data);
});

// The variable 'images' now contains string of file names
// needed to be preloaded.
$.fn.preload = function() {
    this.each(function(){
        $('<img/>')[0].src = this;
    });
}

$(document).ready(function(){
    $(images).preload();
});
</script>

This solution requires no extra 'include' files (unlike my previous answer).