Как отследить полную загрузку тега img?

Question

[ld_10]

Здравствуйте.
В сети полно примеров как отследить полную загрузку картинок созданных через new Image(), но так и не смог найти как отследить полную загрузку картинок если они находятся в теге .
Пример, есть 3 картинки

<img src="https://pp.userapi.com/c830409/v830409785/1be353/SjILkQiUBac.jpg" class="draggable">
<img src="https://pp.userapi.com/c830409/v830409785/1be345/oIX93cgm34k.jpg" class="draggable">
<img src="https://pp.userapi.com/c830409/v830409785/1be33e/73SFiK33foM.jpg" class="draggable">

Нужно через js задать им position: absolute, делаю так

let count = 0, img = document.querySelectorAll('.draggable');

for (let i = 0; i < img.length; i++) {
	img[i].onload = () => {
		if (++count == img.length) {
			for (let i = 0; i < img.length; i++) {
				img[i].style.position = 'absolute';
			}
		}
	}
}

но срабатывает не всегда, как побороть сей баг?

Answer 1

[0xD34F]

Promise
  .all([...img].map(n => new Promise(r => n.complete ? r() : n.onload = r)))
  .then(() => img.forEach(n => n.style.position = 'absolute'));

Comments

[ld_10]

Пробовал вчера сделать на промисах но промахнулся как раз на complete.
Большое спасибо. Все работает.

[ld_10]

0xD34F, Не кинете ссылочку где можно почитать про остальные события типа complete на русском языке?

[0xD34F]

ld_10, https://developer.mozilla.org/ru/docs/Web/API/HTML...

[ld_10]

Благодарю