如果找到图像，则加载该图像，否则加载另一个图像。

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()，但在这两种情况下都失败了。

非常感谢您的帮助，最好的问候。

- BeNdErR

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;

- Denys Séguret

---

有没有一种方法可以调整你的代码，以便如果两者都找不到，它将默认使用另一个始终存在的图像？我尝试用 <始终存在的图像> 替换 console.log，但它没有起作用。 - Rhyono

我认为发生的情况是它缓存了页面，所以当我进行更改时它没有做任何事情。有没有办法抑制第一张图像不加载时的错误？ - Rhyono

@Rhyono 我修改了。你说的清理需求是正确的，因为可能在某些浏览器上会出现问题。 - Denys Séguret

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

这段代码可能比你实际要求的多做了一些事情。你可以把尽可能多的图像路径放入数组中，脚本会搜索列表，直到成功加载一张图片为止。

- jAndy

---

在旧版IE（如IE7）中可能会有一些怪异的问题。 - yunzen

@yunzen：如果在定义onload / onerror处理程序之前分配source，旧版IE可能会出现问题。 - jAndy

Answer 3

尝试类似的东西

objImg = new Image();
objImg.src = 'photo.gif';

if(!objImg.complete)
 { 
      img.src = path2+'/'+imageToFind; //load other image
  }else{
     img.src = path1+'/'+imageToFind;
  }

- NullPoiиteя

Answer 4

我认为你需要问自己：为什么我不知道这些图片是否存在？

我觉得你不应该有这个问题，或者想用这种方式解决它。

- Halcyon