feat(content): add properties for img request/render buffers

Author: adamdbradley

src/components/content/content.ts

@@ -158,15 +158,19 @@ export class Content extends Ion implements OnDestroy, OnInit {
   /** @internal */
   _fullscreen: boolean;
   /** @internal */
-  _imgs: Img[] = [];
-  /** @internal */
   _footerEle: HTMLElement;
   /** @internal */
   _dirty: boolean;
   /** @internal */
   _scrollEle: HTMLElement;
   /** @internal */
   _fixedEle: HTMLElement;
+  /** @internal */
+  _imgs: Img[] = [];
+
+  private _imgReqBfr: number;
+  private _imgRndBfr: number;
+  private _imgVelMax: number;
 
   /** @private */
   statusbarPadding: boolean;
@@ -263,24 +267,6 @@ export class Content extends Ion implements OnDestroy, OnInit {
     return this._scroll.isScrolling;
   }
 
-  /**
-   * The current vertical scroll velocity.
-   *
-   * @return {number}
-   */
-  get velocityY(): number {
-    return this._scroll.ev.velocityY;
-  }
-
-  /**
-   * The current horizontal scroll velocity.
-   *
-   * @return {number}
-   */
-  get velocityX(): number {
-    return this._scroll.ev.velocityX;
-  }
-
   /**
    * The current, or last known, vertical scroll direction. Possible
    * string values include `down` and `up`.
@@ -341,6 +327,9 @@ export class Content extends Ion implements OnDestroy, OnInit {
     super(config, elementRef, renderer, 'content');
 
     this.statusbarPadding = config.getBoolean('statusbarPadding', false);
+    this._imgReqBfr = config.getNumber('imgRequestBuffer', 1400);
+    this._imgRndBfr = config.getNumber('imgRenderBuffer', 400);
+    this._imgVelMax = config.getNumber('imgVelocityMax', 3);
 
     if (viewCtrl) {
       viewCtrl._setIONContent(this);
@@ -818,17 +807,20 @@ export class Content extends Ion implements OnDestroy, OnInit {
    */
   imgsUpdate() {
     if (this._scroll.initialized && this._imgs.length && this.isImgsUpdatable()) {
-      updateImgs(this._imgs, this.scrollTop, this.contentHeight, this.directionY, IMG_REQUESTABLE_BUFFER, IMG_RENDERABLE_BUFFER);
+      updateImgs(this._imgs, this.scrollTop, this.contentHeight, this.directionY, this._imgReqBfr, this._imgRndBfr);
     }
   }
 
   /**
    * @private
    */
   isImgsUpdatable() {
-    // an image is only "updatable" if the content
-    // isn't scrolling too fast
-    return Math.abs(this.velocityY) < 3;
+    // an image is only "updatable" if the content isn't scrolling too fast
+    // if scroll speed is above the maximum velocity, then let current
+    // requests finish, but do not start new requets or render anything
+    // if scroll speed is below the maximum velocity, then it's ok
+    // to start new requests and render images
+    return Math.abs(this._scroll.ev.velocityY) < this._imgVelMax;
   }
 
 }
@@ -920,9 +912,6 @@ export function updateImgs(imgs: Img[], viewableTop: number, contentHeight: numb
   }
 }
 
-const IMG_REQUESTABLE_BUFFER = 1200;
-const IMG_RENDERABLE_BUFFER = 300;
-
 
 function sortTopToBottom(a: Img, b: Img) {
   if (a.top < b.top) {