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, since the page had already been loaded with all the assets. To make it clear, I want to find out final extents of the popup.

Popup is added to DOM like so:

var popup = document.createElement('div');
popup.innerHTML = '...';
document.body.appendChild(popup);

You can use image.onload listener for each images and that way you will get when last image is loaded. — Yogen Darji, Aug 11 '17 at 17:16
Possible duplicate of [Javascript callback for knowing when an image is loaded](https://stackoverflow.com/questions/280049/javascript-callback-for-knowing-when-an-image-is-loaded) — scramlo, Aug 11 '17 at 17:49

scramlo · Answer 1 · 2017-08-11T17:55:21.813

1

Simply:

var image = document.getElementById('image');

image.onload = function () {
    alert ("The image has loaded!");        
};

setTimeout(function(){
    image.src = "http://lorempixel.com/500/500";         
}, 5000);

<img id="image" src="">

See https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onload and Javascript callback for knowing when an image is loaded for more.

edited Aug 11 '17 at 17:55

answered Aug 11 '17 at 17:15

scramlo

105
6

What do you mean by new and modal windows? I don't use any new windows. Just one window, one tab. Popup is part of the same document. – x-yuri Aug 11 '17 at 17:19
Ah, I see your HTML more clearly now. I will update my answer. – scramlo Aug 11 '17 at 17:23
Also, are you sure about it being a reliable way? `image.onload` doesn't get triggered if event handler is added after image has been loaded. Which leaves browsers room for interpretation. Some may consider it being loaded after `modal.innerHTML = '...'` has finished executing if taken from cache for instance. – x-yuri Aug 11 '17 at 17:31
What is the timeout for? – x-yuri Aug 11 '17 at 20:03
The timeout is not necessary, it is just there to simulate the time it might take to request an image from a server. – scramlo Aug 11 '17 at 20:04

score 1 · Accepted Answer · answered Aug 11 '17 at 20:02

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 '<img src="http://via.placeholder.com/50/50">';
}).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;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/bluebird/3.5.0/bluebird.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script>
<div id="console">
</div>

Detect when images added to DOM have been loaded

2 Answers2

Linked

Related