Как на JS перезагрузить битые картинки?

Question

[atHome]

Добрый день!
На сайте циклом генерируются 150+ картинок

for (var item in data) {
	$(".div").append("<img class='img"+item+"' src='generate.php?f="+item+"'>");
}

Часть из них вываливаются в 503 и соответственно не отображаются.

Failed to load resource: the server responded with a status of 503 ()

Попробовал перезагрузить только пустые, результат не очень.

jQuery(window).bind('load', function() {
for (var item in data) {
	size = $('.img'+item).width();
	if (size<17){
		$('.img'+item).attr('src','generate.php?f='+item);		
	}
}
 });

Как мне правильно перезагрузить битые картинки или организовать в принципе изначально показ картинок?
Спасибо.

upd. Вопрос закрыт. Решение в комментариях от Антона Антон

Answer 1

[Dies Irae]

Если изображение не найдено - срабатывает событие $('img').error(function() Лучше обработчик вытащить в тело функции.

Comments

[atHome]

спасибо. Главный вопрос, а как перезагрузить картинку, чтобы оно показалась?

[Dies Irae]

atHome,

$('.img'+item).attr('src','generate.php?f='+item+'&d='+ new Date().getTime());

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

[atHome]

Dies Irae, подскажите, а как мне организовать загрузку картинки до те пор, пока она не загрузится?
При первом запуске страницы не загружается примерно 70 из 150, если поставить обработчик на один прогон повторно, то из оставшихся 70 примерно 20 всё ровно остаются не загружены.

[Антон]

atHome, А почему бы не сделать загрузку картинок тогда, когда они в поле видимости?

[atHome]

Антон, поподробнее?

[Антон]

atHome, Подробный тырк

[atHome]

Антон, то что нужно! Премного благодарен!

Answer 2

[Stalker_RED]

https://jsfiddle.net/Stalk/j3q47rco/1/

Answer 3

[laz652]

let nom = 0;
for (var item in data) {
nom++;
	$(".div").append("<img id='Timeout" + nom  + "'  class='img"+item+"' src='generate.php?f="+item+"'>");
}
//в конце страницы :

async function delayedLoop() {
await new Promise(resolve => setTimeout(resolve, 500));
let nomer = 0;
let nom = 'Timeout0';
while(document.getElementById(nom))  {
await new Promise(resolve => setTimeout(resolve, 22));
document.getElementById(nom).src += '?' + new Date().getTime();
nomer++;
nom = 'Timeout'+String(nomer);
}
}
delayedLoop();

// У меня генерация на PHP, для JS, наверное, лучше сразу добавить временную метку к картинкам и 
// сделать небольшую задержку, чтобы код PHP успевал делать запросы к базе данных.