小编典典

加载图像(如果找到),否则加载其他图像

ajax

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

使用 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()来实现,但是在这两种情况下都失败了。

预先感谢您的任何帮助,最好的问候


阅读 260

收藏
2020-07-26

共1个答案

小编典典

您几乎可以依赖为 Image节点 触发的本机onloadonerror事件处理程序。所以看起来像 __

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

此代码可能比您实际要求的要多。您基本上可以在阵列中添加任意数量的 图像路径 ,但脚本将搜索列表,直到成功加载一张图像为止。

2020-07-26