- Fixed infinite loop when an image can not be found and no brokenImage is provided. #395

HISTORY.md

@@ -21,6 +21,7 @@ http://visjs.org
 - When hovering over a node that does not have a title, the title of one of the connected edges that HAS a title is no longer shown.
 - Fixed error in repulsion physics model.
 - Improved physics handling for smoother network simulation.
+- Fixed infinite loop when an image can not be found and no brokenImage is provided.
 
 ### Graph2d
 

lib/network/Images.js

@@ -4,7 +4,6 @@
  */
 function Images() {
   this.images = {};
-
   this.callback = undefined;
 }
 
@@ -24,25 +23,30 @@ Images.prototype.setOnloadCallback = function(callback) {
  * @return {Image} img          The image object
  */
 Images.prototype.load = function(url, brokenUrl) {
-  var img = this.images[url];
-  if (img == undefined) {
+  if (this.images[url] == undefined) {
     // create the image
-    var images = this;
-    img = new Image();
-    this.images[url] = img;
-    img.onload = function() {
-      if (images.callback) {
-        images.callback(this);
+    var me = this;
+    var img = new Image();
+    img.onload = function () {
+      if (me.callback) {
+        me.images[url] = img;
+        me.callback(this);
       }
     };
-    
+
     img.onerror = function () {
-	  this.src = brokenUrl;
-	  if (images.callback) {
-		images.callback(this);
-	  }
-	};
-	
+      if (brokenUrl === undefined) {
+        console.error("Could not load image:", url);
+        delete this.src;
+        if (me.callback) {
+          me.callback(this);
+        }
+      }
+      else {
+        this.src = brokenUrl;
+      }
+    };
+
     img.src = url;
   }
 

lib/network/Network.js

@@ -236,7 +236,7 @@ function Network (container, data, options) {
   var network = this;
   this.groups = new Groups(); // object with groups
   this.images = new Images(); // object with images
-  this.images.setOnloadCallback(function () {
+  this.images.setOnloadCallback(function (status) {
     network._redraw();
   });
 
@@ -350,16 +350,19 @@ function Network (container, data, options) {
 // Extend Network with an Emitter mixin
 Emitter(Network.prototype);
 
-
+/**
+ * Determine if the browser requires a setTimeout or a requestAnimationFrame. This was required because
+ * some implementations (safari and IE9) did not support requestAnimationFrame
+ * @private
+ */
 Network.prototype._determineBrowserMethod = function() {
-  var ua = navigator.userAgent.toLowerCase();
-
+  var browserType = navigator.userAgent.toLowerCase();
   this.requiresTimeout = false;
-  if (ua.indexOf('msie 9.0') != -1) { // IE 9
+  if (browserType.indexOf('msie 9.0') != -1) { // IE 9
     this.requiresTimeout = true;
   }
-  else if (ua.indexOf('safari') != -1) {  // safari
-    if (ua.indexOf('chrome') <= -1) {
+  else if (browserType.indexOf('safari') != -1) {  // safari
+    if (browserType.indexOf('chrome') <= -1) {
       this.requiresTimeout = true;
     }
   }

lib/network/Node.js

@@ -211,8 +211,6 @@ Node.prototype.setProperties = function(properties, constants) {
     this.options.radiusMax = constants.nodes.widthMax;
   }
 
-
-
   // choose draw method depending on the shape
   switch (this.options.shape) {
     case 'database':      this.draw = this._drawDatabase; this.resize = this._resizeDatabase; break;
@@ -539,7 +537,6 @@ Node.prototype._resizeImage = function (ctx) {
 
 Node.prototype._drawImage = function (ctx) {
   this._resizeImage(ctx);
-
   this.left   = this.x - this.width / 2;
   this.top    = this.y - this.height / 2;