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错误。

我尝试过的其他事情：

try / catch
_。尝试

我还能做些什么？

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。如果您这样做了，那么我就不明白为什么您不会只返回检索所需的实际图像列表，然后在客户端上打开确切的列表。

这绝对感觉像是服务器端处理得更好的问题。

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

1 个答案: