Как отловить событие загрузки всех динамически добавленных картинок?

Question

[DTX]

https://codepen.io/anon/pen/dVeKJr?editors=1010

$( window ).on('load', function() {
  $('#status').text(new Date().toLocaleString())
});

$('#add').click(() => {
  $('#status').text('Inserting images...')
  let imgs = [
    'http://78.media.tumblr.com/3678d62b5ec483cbb5e7f6111453096c/tumblr_om7707tdVU1s3hp12o3_250.jpg',
    'http://78.media.tumblr.com/a3319728c867022630277f3ec4d01910/tumblr_oxbok4C0861s3hp12o1_250.jpg',
    'http://78.media.tumblr.com/8586a62ac5ac5d213de035dec2459bcd/tumblr_oxbnlkmBP51s3hp12o1_250.jpg',
    'http://78.media.tumblr.com/9ca92226e4ebfaab248705db9d2560f8/tumblr_n7v5j6mrlP1s3hp12o1_250.jpg',
    'http://78.media.tumblr.com/66b2f8e0a0c588f934d991c6c1d31510/tumblr_ox8z84NruC1s3hp12o1_250.jpg'
  ]
  
  let ins = []
  imgs.forEach(i => {
    let img = $('<img class="grid-item din"/>').attr('src', i)
    ins.push(img)
  })
  
  $('.grid').prepend(ins)
})

Answer 1

[Дмитрий Лузанов]

imgs.map(i => {
  let img = $('<img class="grid-item din"/>').attr('src', i)
  ins.push(img)
	
  return new Promise(resolve => {
    img.on('load', e => resolve())
  })
})

Promise.all(imgs).then(function() {
	//do
})

Promise.all

Comments

[DTX]

Спасибо! Как раз надеялся увидеть Promise.all :)

[Ridz]

небольшое уточнение, если Promise.all(imgs)
то imgs = imgs.map...

Answer 2

[Никита]

Как вариант просто повесить функцию на онлоад картинки, которая в window.<название переменной> будет считать сколько картинок уже загрузилось, как сколько было = сколько загрузилось, через триггер запускаете свою функцию которая "чтото будет делать" дальше,

Это самый просто сценарий )