Detect when images added to DOM have been loaded

Question

Say, user opens a page, clicks on a button, and popup with images appears. How do I detect when all of the images have been loaded? I can\'t use window.onload here,

Answer 1

Based on this answer. Hopefully that is enough.

var cons = document.querySelector('#console');
var popup = document.createElement('div');
popup.className = 'popup';
popup.innerHTML = _.range(10).map(function(i) {
    return '';
}).join('');
document.body.insertBefore(popup, cons);
waitForImages(popup).then(function() {
    d('loaded');
})

function d(s) {
    var text = document.createTextNode(s);
    cons.appendChild(text);
    var br = document.createElement('br');
    cons.appendChild(br);
}

function waitForImages(el) {
    var images = document.querySelectorAll('img');
    return Promise.all(_.compact(_.map(images, function(img) {
        if (img.complete) {
            d('img.complete');
            return;
        } else
            return new Promise(function(resolve, reject) {
                img.addEventListener('load', function() {
                    d('onload event');
                    resolve();
                });
            });
    })));
}

.popup {
    overflow: hidden;
}
img {
    float: left;
    margin: 0 5px 5px 0;
}