预加载图像文件夹中的图像和图像文件夹中的子目录

Question

I concocted a bit of jquery and php to preload images from an image folder. Our site has since grown and all portfolio images have been put in different folders within the main image directory. I need a way to preload these to make our portfolio quicker. Below is what I have so far.

It loops through the images and puts them into a hidden div so they get cached.

inside preload.php

<div style="display:none">
<?php
 $dirf    = 'images';
 $dir = scandir($dirf);
 foreach($dir as $file) {
 if(($file!='..') && ($file!='.')) {
       echo "<img src='images/$file' />";
   }
 }
?>
</div>

I use a bit of jquery to put it on the page via the #preload div and get rid of it afterwards

 $('#preload').load('preload.php', function () {
    $('#preload').remove();
});

Answer 1

You don't need to add img tags, just create them on the fly:

<script>

<?php
$dirf    = 'images';
$dir = scandir($dirf);
foreach($dir as $file) {
echo "preloads = '";
if(($file!='..') && ($file!='.')) {
    echo "images/$file" . ",";
  }
}
echo "';"
?>

preloads = preloads.split(",")
var tempImg = []

for(var x=0;x<preloads.length;x++) {
    tempImg[x] = new Image()
    tempImg[x].src = preloads[x]
}

setTimeout("tempImg = []", 5000);

</script>