make load on scroll configurable and use debouce

public/app/features/dashboard/model.ts

@@ -36,6 +36,7 @@ export class DashboardModel {
   meta: any;
   meta: any;
   events: any;
   events: any;
   editMode: boolean;
   editMode: boolean;
+  loadOnScroll: boolean;
 
 
   constructor(data, meta?) {
   constructor(data, meta?) {
     if (!data) {
     if (!data) {
@@ -64,6 +65,7 @@ export class DashboardModel {
     this.version = data.version || 0;
     this.version = data.version || 0;
     this.links = data.links || [];
     this.links = data.links || [];
     this.gnetId = data.gnetId || null;
     this.gnetId = data.gnetId || null;
+    this.loadOnScroll = data.loadOnScroll || false;
 
 
     this.rows = [];
     this.rows = [];
     if (data.rows) {
     if (data.rows) {

public/app/features/dashboard/partials/settings.html

@@ -61,6 +61,12 @@
                         checked="dashboard.hideControls"
                         checked="dashboard.hideControls"
                         label-class="width-11">
                         label-class="width-11">
         </gf-form-switch>
         </gf-form-switch>
+        <gf-form-switch class="gf-form"
+                        label="Load on scroll"
+                        tooltip="Load panels as they become visible"
+                        checked="dashboard.loadOnScroll"
+                        label-class="width-11">
+        </gf-form-switch>
       </div>
       </div>
     </div>
     </div>
 
 

public/app/features/panel/metrics_panel_ctrl.ts

@@ -74,13 +74,14 @@ class MetricsPanelCtrl extends PanelCtrl {
     // ignore fetching data if another panel is in fullscreen
     // ignore fetching data if another panel is in fullscreen
     if (this.otherPanelInFullscreenMode()) { return; }
     if (this.otherPanelInFullscreenMode()) { return; }
 
 
-    if (!this.scope.$$childHead || (!this.scope.$$childHead.isVisible() && !this.isRenderGraph())) {
-      this.scope.$$childHead.needsRefresh = true;
-      return;
+    if (this.scope.ctrl.dashboard.loadOnScroll) {
+      if (!this.scope.$$childHead || (!this.scope.$$childHead.isVisible() && !this.isRenderGraph())) {
+        this.scope.$$childHead.needsRefresh = true;
+        return;
+      }
+      this.scope.$$childHead.needsRefresh = false;
     }
     }
 
 
-    this.scope.$$childHead.needsRefresh = false;
-
     // if we have snapshot data use that
     // if we have snapshot data use that
     if (this.panel.snapshotData) {
     if (this.panel.snapshotData) {
       this.updateTimeRange();
       this.updateTimeRange();

public/app/features/panel/panel_directive.ts

@@ -184,7 +184,6 @@ module.directive('grafanaPanel', function($rootScope, $document, $timeout) {
         }
         }
       });
       });
 
 
-      var getDataPromise = null;
       scope.needsRefresh = false;
       scope.needsRefresh = false;
 
 
       scope.isVisible = function () {
       scope.isVisible = function () {
@@ -192,16 +191,11 @@ module.directive('grafanaPanel', function($rootScope, $document, $timeout) {
         return (0 < position.top) && (position.top < window.innerHeight);
         return (0 < position.top) && (position.top < window.innerHeight);
       };
       };
 
 
-      $document.bind('scroll', function () {
-        if (getDataPromise) {
-          $timeout.cancel(getDataPromise);
+      $document.bind('scroll', _.debounce(function () {
+        if (scope.ctrl.dashboard.loadOnScroll && scope.needsRefresh) {
+          scope.ctrl.refresh();
         }
         }
-        if (scope.needsRefresh) {
-          getDataPromise = $timeout(function () {
-            scope.ctrl.refresh();
-          }, 250);
-        }
-      });
+      }, 250));
     }
     }
   };
   };
 });
 });