我如何加载顺序图像，直到一个鸽子不存在？

Question

我在几个目录中有很多图像，我希望能够在特定的目录中加载所有的图像。例如，

directory-1
|
---- panel-1.png
| |- panel-2.png
| |- panel-3.png
|
directory-2
|
---- panel-1.png
  |- panel-2.png

我有许多这样的目录，每个目录中没有多少panel图像的模式。

我想要加载这个目录中的所有图像。

我的第一种方法是加载图像，直到得到404错误。然而，这似乎不起作用。

const imagesLength = _(Array(15)).map((val, i) => {
    const img = new Image
    let valid = true
    img.onerror = () => {
        console.warn('error loading')
        valid = false
        return false
    }
    img.onload = () => {
        if (_.includes(img, 'naturalHeight')) {
            if (img.naturalHeight + img.naturalWidth === 0) {
                console.log(img.naturalHeight, img.naturalWidth)
                img.onerror()
                valid = false
                return false
            }
        } else if (img.width + img.height === 0) {
            console.log(img.width, img.height)
            img.onerror()
            valid = false
            return false
        }
    }
    img.src = `/images/panel-${i+1}.png`

    return valid // logic being, if valid is false it'll exit out of loop
}).compact().size() // I get 15

我不仅得到了错误的数字‘有效’的图像，我还得到404错误。我认为用onerror处理错误应该可以抑制404个错误。

我尝试过的其他事情：

• 试/抓
• _.attempt

还有什么我能改的吗？

Answer 1

我在这里为你创造了一个有用的小提琴：https://jsfiddle.net/wxrwnd08/

它应该给你一个实现你想要的选择的总体想法。基本上，我刚刚创建了一个递归回调函数，每次加载一个图像，直到达到404为止。

var photos = document.getElementById('photos');

function loadImage(src, cb){
    var img = new Image;

    img.onload = function(){
        photos.appendChild(img); 
        console.log('loaded image:', src);
        cb();
    };

    img.onerror = function(err){
        console.log('error:', err);
        cb(err);
    };

    console.log('attempting to load image:', src);
    img.src = src;
};

function loadSequential(pre, ext, first){
    loadImage(pre + first + ext, function(err){
        if(!err) { loadSequential(pre, ext, first + 1); }
    });  
}

loadSequential('http://www.mycitybynight.co.za/wp-content/uploads/2014/08/Tattoo-Mooiness-MyCityByNight-', '.jpg', 35);

注意:使用的照片是我发现的的第一个顺序列表

至于404错误，我不认为您能够避免这种情况，因为您事先不知道您想要获得多少图像，而且是浏览器在页面之前处理这个问题。但是，如果您控制服务器，则可以设置一个api，在尝试下载该文件之前检查该文件是否存在。如果您这样做了，那么我就不明白为什么您不返回检索所需的实际图像列表，然后在客户端上打开确切的列表。

这无疑是一个更好地处理服务器端的问题。