нагрузки более низкое качество изображения, если выше один инст доступны

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 изображение, но мы не всегда есть 600х350 или 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 массива, т.е. в следующем порядке:

запрет ner_620x350.jpg
banner_300x130.jpg
banner_180x60.jpg

FIDDLE