On timeline loaded

docs/timeline/index.html

@@ -886,71 +886,71 @@ <h2 id="Configuration_Options">Configuration Options</h2>
       <td>Callback function triggered when an item is about to be added: when the user double taps an empty space in the Timeline. See section <a href="#Editing_Items">Editing Items</a> for more information. Only applicable when both options <code>selectable</code> and <code>editable.add</code> are set <code><code>true</code></code>.
       </td>
     </tr>
-
+    
     <tr>
       <td>onAddGroup</td>
       <td>function</td>
       <td>none</td>
       <td>Callback function triggered when a group is about to be added. The signature and semantics are the same as for <code>onAdd</code>.
       </td>
     </tr>
-
+    
     <tr>
-      <td>onUpdate</td>
+      <td>onInitialDrawComplete</td>
       <td>function</td>
       <td>none</td>
-      <td>Callback function triggered when an item is about to be updated, when the user double taps an item in the Timeline. See section <a href="#Editing_Items">Editing Items</a> for more information. Only applicable when both options <code>selectable</code> and <code>editable.updateTime</code> or <code>editable.updateGroup</code> are set <code><code>true</code></code>.
+      <td>Callback function triggered when the timeline is initially drawn. This function fires once per timeline creation.
       </td>
     </tr>
-
+    
     <tr>
       <td>onMove</td>
       <td>function</td>
       <td>none</td>
       <td>Callback function triggered when an item has been moved: after the user has dragged the item to an other position. See section <a href="#Editing_Items">Editing Items</a> for more information. Only applicable when both options <code>selectable</code> and <code>editable.updateTime</code> or <code>editable.updateGroup</code> are set <code><code>true</code></code>.
       </td>
     </tr>
-
+    
     <tr>
       <td>onMoveGroup</td>
       <td>function</td>
       <td>none</td>
       <td>Callback function triggered when a group has been moved: after the user has dragged the group to an other position. The signature and semantics are the same as for <code>onMove</code>.
       </td>
     </tr>
-
+    
     <tr>
       <td>onMoving</td>
       <td>function</td>
       <td>none</td>
       <td>Callback function triggered repeatedly when an item is being moved. See section <a href="#Editing_Items">Editing Items</a> for more information. Only applicable when both options <code>selectable</code> and <code>editable.updateTime</code> or <code>editable.updateGroup</code> are set <code><code>true</code></code>.
       </td>
     </tr>
-
+    
     <tr>
       <td>onRemove</td>
       <td>function</td>
       <td>none</td>
       <td>Callback function triggered when an item is about to be removed: when the user tapped the delete button on the top right of a selected item. See section <a href="#Editing_Items">Editing Items</a> for more information. Only applicable when both options <code>selectable</code> and <code>editable.remove</code> are set <code><code>true</code></code>.
       </td>
     </tr>
-
+    
     <tr>
       <td>onRemoveGroup</td>
       <td>function</td>
       <td>none</td>
       <td>Callback function triggered when a group is about to be removed. The signature and semantics are the same as for <code>onRemove</code>.
       </td>
     </tr>
-
+    
     <tr>
-      <td>onInitialDrawComplete</td>
+      <td>onUpdate</td>
       <td>function</td>
       <td>none</td>
-      <td>Callback function triggered when the timeline is initially drawn. This function fires once per timeline creation.
+      <td>Callback function triggered when an item is about to be updated, when the user double taps an item in the Timeline. See section <a href="#Editing_Items">Editing Items</a> for more information. Only applicable when both options <code>selectable</code> and <code>editable.updateTime</code> or <code>editable.updateGroup</code> are set <code><code>true</code></code>.
       </td>
     </tr>
-
+    
     <tr>
       <td>order</td>
       <td>function</td>

examples/timeline/interaction/eventListeners.html

@@ -35,7 +35,7 @@
     var container = document.getElementById('visualization');
     var options = {
       editable: true,
-      onInitialDrawComplete: function() { return logEvent('Timeline initial draw completed', {}) },
+      onInitialDrawComplete: function() { logEvent('Timeline initial draw completed', {}); },
     };
     var timeline = new vis.Timeline(container, items, options);
 

lib/timeline/Core.js

@@ -111,6 +111,11 @@ Core.prototype._create = function (container) {
       this._redraw();
     }
   }.bind(this));
+  this.on('rangechanged', function () {
+    if (!this.initialRangeChangeDone) {
+      this.initialRangeChangeDone = true;
+    }
+  }.bind(this));
   this.on('touch',       this._onTouch.bind(this));
   this.on('panmove',         this._onDrag.bind(this));
 
@@ -319,6 +324,7 @@ Core.prototype._create = function (container) {
 
   this.redrawCount = 0;
   this.initialDrawDone = false;
+  this.initialRangeChangeDone = false;
 
   // attach the root panel to the provided container
   if (!container) throw new Error('No container provided');

lib/timeline/Timeline.js

@@ -65,6 +65,7 @@ function Timeline (container, items, groups, options) {
   // Create the DOM, props, and emitter
   this._create(container);
   if (!options || (options && typeof options.rtl == "undefined")) {
+    this.dom.root.style.visibility = 'hidden';
     var directionFromDom, domNode = this.dom.root;
     while (!directionFromDom && domNode) {
       directionFromDom = window.getComputedStyle(domNode, null).direction;
@@ -173,9 +174,19 @@ function Timeline (container, items, groups, options) {
 
         var start = me.options.start != undefined ? me.options.start : range.min;
         var end   = me.options.end   != undefined ? me.options.end   : range.max;
-        me.setWindow(start, end, {animation: false}, this._activateOnInitialDrawDone.bind(this));
+        me.setWindow(start, end, {animation: false});
       } else {
-        me.fit({animation: false}, this._activateOnInitialDrawDone.bind(this));
+        me.fit({animation: false});
+      }
+    }
+
+    if (!me.initialDrawDone && me.initialRangeChangeDone) {
+      me.initialDrawDone = true;
+      me.dom.root.style.visibility = 'visible';
+      if (me.options.onInitialDrawComplete) {
+        setTimeout(() => {
+          return me.options.onInitialDrawComplete();
+        }, 0)
       }
     }
   });
@@ -202,16 +213,6 @@ function Timeline (container, items, groups, options) {
 // Extend the functionality from Core
 Timeline.prototype = new Core();
 
-Timeline.prototype._activateOnInitialDrawDone = function() {
-  if (!this.initialDrawDone) {
-    this.initialDrawDone = true;
-    setTimeout(() => {
-      if (this.options.onInitialDrawComplete) {
-        return this.options.onInitialDrawComplete();
-      }
-    }, 0)
-  }
-}
 /**
  * Load a configurator
  * @return {Object}
@@ -421,7 +422,7 @@ Timeline.prototype.focus = function(id, options) {
  *                                    provided to specify duration and easing function.
  *                                    Default duration is 500 ms, and default easing
  *                                    function is 'easeInOutQuad'.
- * @param {Function} callback
+ * @param {function} [callback]
  */
 Timeline.prototype.fit = function (options, callback) {
   var animation = (options && options.animation !== undefined) ? options.animation : true;