Как отследить загрузку всех картинок внутри контейнера?

Question

[Shimpanze]

Здравствуйте!

Необходимо отследить загрузку всех изображений в контейнере. Пишу код:

'use strict';

// выбираем целевой элемент
var el = document.getElementById('images-container');

// создаём экземпляр MutationObserver
var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    // делаем то что нам нужно
    alert('Все изображения загружены');
  });    
});

// добавляем необходимые события для слежения
observer.observe(el, {
  subtree: true, // наблюдать за потомками
});

Песочница

Скажите, почему не срабатывает?

Спасибо!

Answer 1

[Stalker_RED]

У вас там ничего не меняется, потому ничего и не высвечивается.
Вот я добавил код, добавляющий вертолет каждый 3 секунды, и MutationObserver работает
https://codepen.io/anon/pen/bLrvGE?editors=1010

// делаем то что нам нужно
    alert('Все изображения загружены');

Это вообще непонятно что такое. Откуда известно, что они загружены?

Comments

[Shimpanze]

Мне необходимо отследить полную загрузку всех изображений и затем выполнить функцию. Из за этого все это затевается

[Stalker_RED]

Shimpanze, подпишитесь на событие load у каждой картинки.

let total = всекартинки.length
let loadedCounter = 0
всекартинки.forEach(el => el.addeventListener('load', foo))
const foo = function(e){
  loadedCounter++
  if (loadedCounter == total) {
    // ...
  }
}

[Shimpanze]

Stalker_RED, Большое спасибо, создал песочницу, посмотрите, пожалуйста, почему не срабатывает?

Песочница

[Stalker_RED]

Shimpanze, https://codepen.io/anon/pen/mXqdev?editors=1010
вы бы хоть открыли консоль и посмотрели ошибки, они простейшие же

[Shimpanze]

Stalker_RED, еще не совсем я... Простите. Спасибо!

Answer 2

[Exploding]

Может вот это?