如果找到则加载图像,否则加载另一个图像

Question

我需要做的很简单,但(对我来说)很难做到:

使用javascript,给定一个图像名称,即"image01.jpg",我需要检查这个图像是否存在于某个文件夹或路径中(本地或网络上).如果该文件夹下不存在该图像,我需要检查另一个文件夹中是否存在相同的图像.

例如,使用伪代码

imageToFind = 'image01.jpg'
path1 = 'users/john/images'
path2 = 'users/mike/img'

if path1+'/'+imageToFind exists
    //do something
else
    if path2+'/'+imageToFind exists
        //do something
    else
        print('NOT FOUND')

你建议采用什么样的方法？我首先尝试使用ajax实现这一点,然后使用javascript的Image(),但在这两种情况下我都失败了.

在此先感谢任何帮助,最好的问候

Answer 1

使用onerror回调:

var img = new Image();
img.onerror = function(){
   img = new Image(); // clean the error (depends on the browser)
   img.onerror = function(){
       console.log('not found at all !');
   };
   img.src = path2+'/'+imageToFind;
};
img.src = path1+'/'+imageToFind;

Answer 2

您几乎可以依赖为图像节点触发的本机onload和事件处理程序。所以它可能看起来像onerror

var images = ['users/john/images/image01.jpg','users/mike/img/image01.jpg','some/more/path/image01.jpg'];

(function _load( img ) {
    var loadImage = new Image();

    loadImage.onerror = function() {
        // image could not get loaded, try next one in list
        _load( images.shift() );
    };
    loadImage.onload = function() {
        // this image was loaded successfully, do something with it
    };

    loadImage.src = img;
}( images.shift() ));

这段代码的作用可能比您实际要求的要多一些。基本上，您可以将任意数量的图像路径放入该数组中，脚本将搜索列表，直到它可以成功加载一张图像。