0

我想预加载一个包含图像的目录。

到目前为止，我正在使用此代码：

预加载.php

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

页脚.php

<script type="text/javascript">
    // put contents of all_images.php file into variable 'images'

$.ajax({
  type: "GET",
  async: false,
  cache: false,
  url: "./preload.php",
  data: "getid=true",
  success: 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;
        });
    }


</script>


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

但它似乎不起作用。在萤火虫我得到uncaught exception: Syntax error, unrecognized expression:

如果我粘贴所有链接而不是“图像” $(images).preload(); ，我不会收到错误消息，但我的图像也没有加载。

感谢任何帮助，因为我整天都坐在这里试图弄清楚。

更新#1

所以，现在我这样做：

$(document).ready(function(){
  $.getJSON("./preload.php?getid=true", function(data) {
    var images = [];
    $.each(data, function(i, val) {
      images[i] = new Image().src=val;`

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

到目前为止没有错误，但图像仍然没有显示在萤火虫的“网络”选项卡中。

4

1 回答 1

3

几个问题

尝试getJSON

$(document).ready(function(){
  $.getJSON("./preload.php?getid=true", function(data) {
    var images = [];
    $.each(data, function(i, val) {
      images[i] = new Image().src=val;
    });
  });
});
于 2012-11-14T14:54:43.307 回答