Delay showing image-based elements until the image has been downloaded

1 files changed, 27 insertions, 4 deletions

diff --git a/src/eventhandler.js b/src/eventhandler.js
index e4e3b0c..c4102b5 100644
--- a/src/eventhandler.js
+++ b/src/eventhandler.js
@@ -19,13 +19,15 @@ function createWidgetElement(pointer)
     element.id = this.elmentId(pointer);
     element["pointer"] = pointer;
     element.className = "divWidget";
-    element.style.visibility = "visible";
+    element.imageLoaded = false;
+    hideElement(element);
     document.body.appendChild(element);
 
     dojo.connect(element, 'onmousedown', this, sendMousePressed);
     dojo.connect(element, 'onmouseup', this, sendMouseReleased);
     dojo.connect(element, 'ondblclick', this, sendMouseDoubleClick);
     dojo.connect(element, 'onkeypress', this, sendKeyPress);
+    dojo.connect(element, 'onload', this, imageLoaded);
     return element;
 }
 
@@ -97,6 +99,28 @@ function createElement(widgetType, id)
     return element;
 }
 
+function showElement(element)
+{
+    // delay showing of generic widgets until the image has ben loaded,
+    if (element.className == "divWidget") {
+        if (element.imageLoaded)
+            element.style.visibility = "visible";
+    } else {
+        element.style.visibility = "visible";
+    }
+}
+
+function hideElement(element)
+{
+    element.style.visibility = "hidden";
+}
+
+function imageLoaded(event)
+{
+    event.target.imageLoaded = true;
+    event.target.style.visibility = "visible";
+}
+
 function updateText(element, text)
 {
 //    console.log("update text" + text + " " + element.nodeName);
@@ -194,7 +218,6 @@ function eventHandler(text)
             var source = this.jsonUrl + JSON.stringify({ "type" : "img", "id" : widget, "rand" : Math.random()});
 
             element.src = source;
-            element.style.visibility = "visible";
         } else if (type == "geometry") {
             console.log("geometry x " + event.x + " y " + event.y + " w " + event.w + " h " + event.h);
             this.moveElement(element, event.x, event.y)
@@ -208,9 +231,9 @@ function eventHandler(text)
             }
 
         } else if (type == "hide") {
-            element.style.visibility = "hidden";
+            hideElement(element);
         } else if (type == "show") {
-            element.style.visibility = "visible";
+            showElement(element);
         } else if (type == "parentChange") {
      //       alert("parentChange");
             var parentPointer = array[key].parent;