Question

我想预先加载带有图片的目录。

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

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

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

但它似乎没有用。在Firebug中，我得到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();
    });
  });
});

到目前为止没有错误，但图片仍然没有显示在萤火虫的“网络”标签中。

Answer 1

几个问题

尝试getJSON

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

预加载图像目录

1 个答案: