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

时间:2013-09-18 12:49:20

标签: php jquery

我编写了一些jquery和php来预加载图像文件夹中的图像。我们的网站已经增长,所有投资组合图像都放在主图像目录中的不同文件夹中。我需要一种方法来预加载这些以使我们的投资组合更快。以下是我到目前为止的情况。

它遍历图像并将它们放入隐藏的div中,以便缓存它们。

在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>

我使用一些jquery通过#preload div将它放在页面上然后删除它

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

1 个答案:

答案 0 :(得分:0)

您无需添加img标签,只需动态创建:

<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>