javascript - 无法加载较高质量的较低质量图像

Question

所以我有一个看起来像这样的图像文件夹

- img
-- 001
--- banner_620x350.jpg
--- banner_300x130.jpg
--- banner_180x60.jpg
-- 002
--- banner_300x130.jpg
--- banner_180x60.jpg
-- 003
--- banner_180x60.jpg

我目前加载图片的方式是这样的

<img src="img/003/banner_620x350.jpg" alt="001" onError="this.onerror=null;this.src='img/003/banner_180x60.jpg';" />

因为我们总是有 180x60 的图像，但我们并不总是有 600x350 或 300x130

我想做的是这个

if 600x350 exists uses it
else if does 300x130 exists use it
else use 180x60

PS:我无法检查服务器端。

Answer 1

创建一个函数来检查图像是否可以加载，如果不能，则继续下一个等等。如果所有这些都失败，它仍然返回数组中的最后一个:

function checkSource(src) {
    var def = $.Deferred(),
        res = ['620x350', '180x60', '180x60'];

    (function s(i) {
        $('<img />', {src : (src + '_' + res[i] + '.jpg')}).on({
            load: function() {
                def.resolve(this.src);
            },
            error: function() {
                if (i != res.length-1) {
                    s(++i);
                }else{
                    def.resolve(this.src);
                }
            }
        });
    }(0));
    return def.promise();
};

你可以这样调用它:

checkSource('banner').done(function(file) {
    $('img#banner').prop('src', file);
});

并将源设置为可以加载的任何图像，按照 res 数组的顺序，即按照以下顺序:

banner_620x350.jpg
banner_300x130.jpg
banner_180x60.jpg

FIDDLE