Question

我正在乱砍一些Dropbox图片幻灯片。我使用Dropbox Public文件夹共享index.html文件，该文件在'img'文件夹中查找一堆图像以创建幻灯片。

我使用以下内容执行此操作，它很简陋，但有效

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

针对解决方案的问题。有人有什么好主意吗？可能要求我采取不同的方向......

Answer 1

最佳方式，让用户告诉您扩展程序

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(); 
}

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

查找没有扩展名的图像的MIME类型

1 个答案: