JSFiddle - React, Tailwind, and code Playground

by Ian Roberts

HTML

<div class="container"></div>
<div class="container"></div>
<div class="container"></div>

JavaScript

(function (global) {
    "use strict";
    
    var containers = document.getElementsByClassName("container");
    var loadedImageCount = 0;


    if (!("MutationObserver" in global)) {
        global.MutationObserver = global.WebKitMutationObserver || global.MozMutationObserver;
    }

    function countLoadedImages(e) {
        var img = e.target,
            width = img.clientWidth,
            height = img.clientHeight;

        img.removeEventListener('load', countLoadedImages, false);
        // alert as each image has laoded
        // alert("Image loaded: width: " + width + " height: " + height);
        loadedImageCount++
        // alert when all images are loaded
        if ( containers.length === loadedImageCount) {
          alert(`All Image Have Loaded`)
        }
    }

    var observer = new MutationObserver(function (mutations) {
        mutations.forEach(function (mutation) {
            switch (mutation.type) {
            case 'childList':
                Array.prototype.forEach.call(mutation.target.children, function (child) {
                    if (child.className === "smiley") {
                        child.addEventListener('load', countLoadedImages, false);
                    }
                });
                break;
            default:
            }
        });
    });

    for (var i = 0; i < containers.length; ++i) {
        var container = containers[i];  
      	observer.observe(container, {
        	childList: true,
        	characterData: true,
       		subtree: true
    		});
    }

  	for (var i = 0; i < containers.length; ++i) {
    	var container = containers[i];  
    	container.innerHTML = "<img class='smiley' src='http://upload.wikimedia.org/wikipedia/commons/4/4b/Apple_pie.jpg'/>";
    }
    
}(window));