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

如果可用的较高，则加载较低质量的图像

1 个答案: