Источник изображения по условию
 

Всем привет. Дело встало за следующим. В зависимости от разрешения окна браузера, должен меняться источник картинки. Варианты с @media не подходят, так как картинка должна быть не фоном а строкой типа <img src=""" />

Попробовал сделать так

<div class="test">
    <img src="/A/img.jpg" />
 </div>

<script>
 	if (screen.width <= 480) 
 		{document.getElementsByClassName('test')[0].innerHTML = '<img src="/B/img.jpg" />'}

</script>

Вариант работает, но учитывая то, что картинок несколько десятков, придется вручную прописывать getElementsByClassName для каждой картинки. Может быть можно сделать решение более компактным?

А как насчет обойти все элементы в цикле?

function setImages(str) {
	[].forEach.call(document.querySelectorAll('.test'), function(item) {
    	item.innerHTML = str;
    });
}

if (screen.width <= 480) {
	setImages('<img src="/B/img.jpg" />');
}

Циклом можно, но в setImages можно только одно изображение прописать, а у нас картинки то разные. В зависимости от разрешения экрана в адресе img должна меняться папка

/A/img1.jpg
/A/img5.jpg
/A/img10.jpg

if экран меньше 480 то

/B/img1.jpg
/B/img5.jpg
/B/img10.jpg

Проходи в цикле картинки при условии, дергай у каждой картинки src, потом замени путь и вставь его заного.

var str = "/A/img.jpg";
var str2 = str.replace("/A/","/B/");