Perform initial render on DOMContentLoaded (#54)

src/apis/drawIcon.js

@@ -1,6 +1,7 @@
 import { iconGenerator } from "../renderer/iconGenerator";
 import { isValidHash, computeHash } from "../common/hashUtils";
 import { CanvasRenderer } from "../renderer/canvas/canvasRenderer";
+import { IS_RENDERED_PROPERTY } from "../common/dom";
 
 /**
  * Draws an identicon to a context.
@@ -19,4 +20,9 @@ export function drawIcon(ctx, hashOrValue, size, config) {
     iconGenerator(new CanvasRenderer(ctx, size), 
         isValidHash(hashOrValue) || computeHash(hashOrValue), 
         config);
+
+    const canvas = ctx.canvas;
+    if (canvas) {
+        canvas[IS_RENDERED_PROPERTY] = true;
+    }
 }

src/apis/update.js

@@ -6,7 +6,7 @@
 
 import { iconGenerator } from "../renderer/iconGenerator";
 import { isValidHash, computeHash } from "../common/hashUtils";
-import { ATTRIBUTES, ICON_SELECTOR, documentQuerySelectorAll } from "../common/dom";
+import { ATTRIBUTES, ICON_SELECTOR, IS_RENDERED_PROPERTY, documentQuerySelectorAll } from "../common/dom";
 import { SvgRenderer } from "../renderer/svg/svgRenderer";
 import { SvgElement } from "../renderer/svg/svgElement";
 import { CanvasRenderer } from "../renderer/canvas/canvasRenderer";
@@ -22,6 +22,24 @@ export function updateAll() {
     }
 }
 
+/**
+ * Updates all canvas elements with the `data-jdenticon-hash` or `data-jdenticon-value` attribute that have not already
+ * been rendered.
+ */
+export function updateAllConditional() {
+    if (documentQuerySelectorAll) {
+        /** @type {NodeListOf<HTMLElement>} */
+        const elements = documentQuerySelectorAll(ICON_SELECTOR);
+
+        for (let i = 0; i < elements.length; i++) {
+            const el = elements[i];
+            if (!el[IS_RENDERED_PROPERTY]) {
+                update(el);
+            }
+        }
+    }
+}
+
 /**
  * Updates the identicon in the specified `<canvas>` or `<svg>` elements.
  * @param {(string|Element)} el - Specifies the container in which the icon is rendered as a DOM element of the type
@@ -126,5 +144,6 @@ function renderDomElement(el, hashOrValue, config, rendererFactory) {
     if (renderer) {
         // Draw icon
         iconGenerator(renderer, hash, config);
+        el[IS_RENDERED_PROPERTY] = true;
     }
 }

src/browser-umd.js

@@ -11,9 +11,10 @@ import { observer } from "./common/observer";
 import { configure } from "./apis/configure";
 import { drawIcon } from "./apis/drawIcon";
 import { toSvg } from "./apis/toSvg";
-import { update, updateAll } from "./apis/update";
+import { update, updateAll, updateAllConditional } from "./apis/update";
 import { jdenticonJqueryPlugin } from "./apis/jquery";
 import { GLOBAL } from "./common/global";
+import { whenDocumentIsReady } from "./common/dom";
 
 const jdenticon = updateAll;
 
@@ -56,7 +57,7 @@ function jdenticonStartup() {
     )["replaceMode"];
 
     if (replaceMode != "never") {
-        updateAll();
+        updateAllConditional();
 
         if (replaceMode == "observe") {
             observer(update);
@@ -65,8 +66,6 @@ function jdenticonStartup() {
 }
 
 // Schedule to render all identicons on the page once it has been loaded.
-if (typeof setTimeout === "function") {
-    setTimeout(jdenticonStartup, 0);
-}
+whenDocumentIsReady(jdenticonStartup);
 
 module.exports = jdenticon;

src/common/dom.js

@@ -13,6 +13,8 @@ export const ATTRIBUTES = {
     VALUE: "data-jdenticon-value"
 };
 
+export const IS_RENDERED_PROPERTY = "jdenticonRendered";
+
 export const ICON_SELECTOR = "[" + ATTRIBUTES.HASH +"],[" + ATTRIBUTES.VALUE +"]";
 
 export const documentQuerySelectorAll = /** @type {!Function} */ (
@@ -31,3 +33,24 @@ export function getIdenticonType(el) {
         }
     }
 }
+
+export function whenDocumentIsReady(/** @type {Function} */ callback) {
+    function loadedHandler() {
+        document.removeEventListener("DOMContentLoaded", loadedHandler);
+        window.removeEventListener("load", loadedHandler);
+        setTimeout(callback, 0); // Give scripts a chance to run
+    }
+
+    if (typeof document !== "undefined" &&
+        typeof window !== "undefined" &&
+        typeof setTimeout !== "undefined"
+    ) {
+        if (document.readyState === "loading") {
+            document.addEventListener("DOMContentLoaded", loadedHandler);
+            window.addEventListener("load", loadedHandler);
+        } else {
+            // Document already loaded. The load events above likely won't be raised
+            setTimeout(callback, 0);
+        }
+    }
+}

test/e2e/browser/assets/index.html

@@ -12,7 +12,8 @@
     </div>
 
     <!-- Tests are run in iframes to allow isolated testing of loaders and configuration -->
-    <iframe name="amd" class="amd" src="amd.html"></iframe>
+    <iframe name="amd" src="amd.html"></iframe>
+    <iframe name="umd-in-head" src="umd-in-head.html"></iframe>
     <iframe name="normal" src="normal.html"></iframe>
     <iframe name="padding-0" src="padding.html?padding=0"></iframe>
     <iframe name="padding-30" src="padding.html?padding=30"></iframe>

test/e2e/browser/assets/umd-in-head.html

@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>Jdenticon</title>
+        <link rel="stylesheet" type="text/css" href="styles.css">
+        <script>
+        var jdenticon_config = {
+            backColor: "#00f1"
+        };
+        </script>
+        <script src="/node_modules/jdenticon/dist/jdenticon.min.js"></script>
+    </head>
+    <body>
+        <h1>"Icon0" - UMD in &lt;head&gt; - Should be equal</h1>
+        <figure>
+            <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAMAAABHPGVmAAAAWlBMVEUAAP9aOuYxMYKdne+CXN5AQGLHx+lDQ2TIyOlDQ13NzedHR1ZHR1jW1ufY2OdLS1Dg4OVKSk/g4OWjc9Gjc9FLS02ldNDj4+RLS0yldNDj4+VMTEymddHl5eU2yqFLAAAAG3RSTlMRHy8vPVtbXFxra4iIiIjDw8TE0tPw8PDx8fEmYw1hAAABrUlEQVR42u2ZYWvCQBBE6542UVuT2Kaxnvf//2aR45hrl2mgxyKFfR+HjM9EggP35DiOY0x4fn0OP0PZveyEhLTOFWO6M367ToZ4ZxAe6jrnsKTMckC4n2Nm3tNQ1ylhSYUllFDmWJiFhrrOGBMYSzhEMNBQ1wkh1YQcSqwRErK6pk81fQ67WNORkNU1p1RzyuEx1hxJSOrmd/KA3wScEziXcIpgoqGuM8I1Fa54Ty6xcBEa6jrlcC0X1W/8pXzcnoe6zgnnfLOhDmXKj0VISOtc0596dY10x05oqOuO8xAwD2zrmAeEprqeB4Smup4HhJa6ngeMlrr+KyK01PWfKqOhTuaBYrNtqKuvQhxvn9uG+q8PFY7b7WP7x7qeB9TBLOt1PQ+Yg1nW63oeMAezrNf1POAObuF1Mg+Yg1t4ncMdsFDaHbBYOMwtm3ctwatvYYHDygKHwRKABQ6DIQELHO1DQlvgMBgSsMBhMSRggaN9SBBLdtgMCVjg+K9DAlgOCWA5JIDlkAA2Q4LTPiQ4JkMCrNcdx482/Gij5Whj8qMNP9rwow0/2nAcx7HjC8pg1fBM8ggRAAAAAElFTkSuQmCC" width="100" height="100">
+            <figcaption><strong>IMG</strong> static image</figcaption>
+        </figure>
+
+        <figure>
+            <canvas data-jdenticon-value="Icon0" width="100" height="100"></canvas>
+            <figcaption><strong>Canvas</strong> UMD in &lt;head&gt;</figcaption>
+        </figure>
+        <script src="common.js"></script>
+    </body>
+</html>