0

我正在制作一个小的 Dropbox 图像幻灯片。我使用 Dropbox Public 文件夹共享 index.html 文件，该文件在“img”文件夹中查找一堆图像以创建幻灯片。

我用以下方法做到这一点，它很hacky但有效

var findFiles = function(slideLimit){
  var limit = slideLimit;
  var img = [];

  for(var i = 1; i < limit; i++){

    var src = "<li class='slide slide-"+i+"'><img src='img/"+i+".png' onerror='imgError(this);''></li>"
    $('.frame ul').append(src);

  }

}

这很好用，但我想提供一个不依赖于用户必须使用 .png 的解决方案。

我希望省略扩展可以在 Dropbox 上工作，但结果不是：

    var src = "<li class='slide slide-"+i+"'><img src='img/"+i+"' onerror='imgError(this);''></li>"

我一直在绞尽脑汁，理想情况下我想要

if( mimeType = png)
   i + '.png'
else if (mimeType = gif)
   i + '.gif'
etc

有点卡住了解决方案。有人有什么好主意吗？可能需要我采取不同的方向......

4

1 回答 1

2

最好的方法，让用户告诉你扩展名

var findFiles = function(slideLimit, ext){
    var limit = slideLimit,
        img = [],
        lis = [];
    ext = ext || "png";   
    for (var i = 1; i < limit; i++) {
        lis.push("<li class='slide slide-"+i+"'><img src='img/"+i+"."+ext+"' onerror='imgError(this);''></li>");
    }
    $('.frame ul').append(lis.join(""));
}

ping 服务器以获取文件，缺点是需要时间来继续访问服务器以查看文件是否存在

var findFiles = function(slideLimit){
    var limit = slideLimit,
        img = [],
        lis = [],
        extList = ["png","gif"];

    function testExt () {
        var ext = extList.shift();
        if (ext) {
            var img = new Image();
            img.onload = function () {
                load(ext);
            };
            img.onerror = testExt;
            img.src="img/1." + ext;
        }
    }

    function load (ext){
        for (var i = 1; i < limit; i++) {
            lis.push("<li class='slide slide-"+i+"'><img src='img/"+i+"."+ext+"' onerror='imgError(this);''></li>");
        }
        $('.frame ul').append(lis.join(""));
    }

    testExt(); 
}

[注意两个代码片段都未经测试，在编辑器中写在这里]

于 2013-02-19T18:16:43.707 回答