Stackoverflow answer 20150529

My answer to http://stackoverflow.com/questions/30528814/how-to-check-if-changes-to-innerhtml-have-completely-loaded/30531987#30531987

HTML

<div id="myDiv">Click Me</div>
<div id="myDiv2">Watch</div>

JavaScript

var myDiv = document.getElementById("myDiv");
var myDiv2 = document.getElementById("myDiv2");

var myWatcher = 0;

myDiv.onclick = function () {

    var myImage = "<img id='myImage' src='https://www.google.com/logos/doodles/2018/2018-asian-games-6501582823751680.2-law.gif' style='max-width: 150px;' />";

    var myImage2 = "<img id='myImage2' src='https://www.google.com/logos/doodles/2018/2018-asian-games-6501582823751680.2-law.gif' style='max-width: 150px;'  />";

    myDiv.innerHTML = myImage;
    myDiv2.innerHTML = myImage2;

    // Most important part. Get all the img tags AFTER div was modified.
    var myImg = document.getElementsByTagName("img");

    // Check if each img is loaded. Second img might be loaded before first.
    for (var i = 0; i < myImg.length; i++) {

        myImg[i].onload = function () {
            myWatcher++;

            if (myWatcher == myImg.length) {
                alert("All is loaded.");
                // Might want to call a function for anything you might want to do.
            }
        };
    }
};