How to track the loading of all images inside a container?

Question

JavaScript

Hello!
It is necessary to track the loading of all images in the container. I write code:

'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, // наблюдать за потомками
});

Sandbox
Tell me why it doesn't work?
Thank you!

Answer 1

You don't change anything there, that's why nothing is displayed.
Here I have added a code that adds a helicopter every 3 seconds and MutationObserver works
https://codepen.io/anon/pen/bLrvGE?editors=1010

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

It's not at all clear what it is. How do you know they are loaded?

Answer 2

Maybe this is it ?