Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
  <script src="//cdn.jsdelivr.net/mootools/1.4.5/mootools-core-1.4.5-full-nocompat-yc.js"></script>
  <script src="//rawgit.com/megawac/MutationObserver.js/master/MutationObserver.js"></script>
</head>
<body>
  <div id="container"></div>
  <span id="note"></span>
</body>
</html>
 
#note {
  position: absolute;
  left: 20px;
  top: 20px;
  font-size: 18px;
  color: white;
}
 
$(document).addEvent("domready", function () {
    "use strict";
    function loadImage(e) {
        var img = e.target,
            width = img.clientWidth,
            height = img.clientHeight;
        img.removeEvent('load', loadImage);
      document.getElementById("note").innerHTML = "Mutation Observer spotted image :) width: " + width + " height: " + height;
    }
    var observer = new MutationObserver(function (mutations) {
        mutations.forEach(function (mutation) {
            Array.each(mutation.target.children, function (child) {
                if (child.id === "smiley") {
                    $(child).addEvent('load', loadImage, false);
                }
            });
        });
    });
    var container = document.getElementById("container");
    observer.observe(container, {
        childList: true
    });
    container.innerHTML = "<img id='smiley' src='http://upload.wikimedia.org/wikipedia/commons/4/4b/Apple_pie.jpg'/>";
});
Output

This bin was created anonymously and its free preview time has expired (learn why). — Get a free unrestricted account

Dismiss x
public
Bin info
anonymouspro
0viewers