fix(img): use img tag due to cordova limitations

Author: adamdbradley

src/components/img/img-loader.ts

@@ -2,8 +2,8 @@ import { ChangeDetectionStrategy, Component, ElementRef, Input, NgZone, OnDestro
 
 import { Content } from '../content/content';
 import { DomController } from '../../util/dom-controller';
-import { ImgLoader, ImgLoadCallback } from './img-loader';
 import { isPresent, isTrueProperty } from '../../util/util';
+import { listenEvent, eventOptions } from '../../util/ui-event-manager';
 import { Platform } from '../../platform/platform';
 
 
@@ -80,40 +80,12 @@ import { Platform } from '../../platform/platform';
  * Its concrete object size is resolved as a cover constraint against the
  * element’s used width and height.
  *
+ * ### Future Optimizations
  *
- * ### Web Worker and XHR Requests
- *
- * Another big cause of scroll jank is kicking off a new HTTP request,
- * which is exactly what images do. Normally, this isn't a problem for
- * something like a blog since all image HTTP requests are started immediately
- * as HTML parses. However, Ionic has the ability to include hundreds, or even
- * thousands of images within one page, but its not actually loading all of
- * the images at the same time.
- *
- * Imagine an app where users can scroll slowly, or very quickly, through
- * thousands of images. If they're scrolling extremely fast, ideally the app
- * wouldn't want to start all of those image requests, but if they're scrolling
- * slowly they would. Additionally, most browsers can only have six requests at
- * one time for the same domain, so it's extemely important that we're managing
- * exacctly which images we should downloading. Basically we want to ensure
- * that the app is requesting the most important images, and aborting
- * unnecessary requests, which is another benefit of using `ion-img`.
- *
- * Next, by running the image request within a web worker, we're able to pass
- * off the heavy lifting to another thread. Not only are able to take the load
- * of the main thread, but we're also able to accurately control exactly which
- * images should be downloading, along with the ability to abort unnecessary
- * requests. Aborting requets is just as important so that Ionic can free up
- * connections for the most important images which are visible.
- *
- * One restriction however, is that all image requests must work with
- * [cross-origin HTTP requests (CORS)](https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS).
- * Traditionally, the `img` element does not have this issue, but because
- * `ion-img` uses `XMLHttpRequest` within a web worker, then requests for
- * images must be served from the same domain, or the image server's response
- * must set the `Access-Control-Allow-Origin` HTTP header. Again, if your app
- * does not have the same problems which `ion-img` is solving, then it's
- * recommended to just use the standard `img` HTML element instead.
+ * Future goals are to place image requests within web workers, and cache
+ * images in-memory as datauris. This method has proven to be effective,
+ * however there are some current limitations with Cordova which we are
+ * currently working on.
  *
  */
 @Component({
@@ -130,12 +102,10 @@ export class Img implements OnDestroy {
   /** @internal */
   _renderedSrc: string;
   /** @internal */
-  _tmpDataUri: string;
+  _hasLoaded: boolean;
   /** @internal */
   _cache: boolean = true;
   /** @internal */
-  _cb: ImgLoadCallback;
-  /** @internal */
   _bounds: any;
   /** @internal */
   _rect: any;
@@ -147,6 +117,10 @@ export class Img implements OnDestroy {
   _wQ: string = '';
   /** @internal */
   _hQ: string = '';
+  /** @internal */
+  _img: HTMLImageElement;
+  /** @internal */
+  _unreg: Function;
 
   /** @private */
   canRequest: boolean;
@@ -155,7 +129,6 @@ export class Img implements OnDestroy {
 
 
   constructor(
-    private _ldr: ImgLoader,
     private _elementRef: ElementRef,
     private _renderer: Renderer,
     private _platform: Platform,
@@ -191,11 +164,11 @@ export class Img implements OnDestroy {
 
       if (newSrc.indexOf('data:') === 0) {
         // they're using an actual datauri already
-        this._tmpDataUri = newSrc;
+        this._hasLoaded = true;
 
       } else {
         // reset any existing datauri we might be holding onto
-        this._tmpDataUri = null;
+        this._hasLoaded = false;
       }
 
       // run update to kick off requests or render if everything is good
@@ -210,7 +183,7 @@ export class Img implements OnDestroy {
     if (this._requestingSrc) {
       // abort any active requests
       console.debug(`abortRequest ${this._requestingSrc} ${Date.now()}`);
-      this._ldr.abort(this._requestingSrc);
+      this._srcAttr('');
       this._requestingSrc = null;
     }
     if (this._renderedSrc) {
@@ -228,61 +201,34 @@ export class Img implements OnDestroy {
     // only attempt an update if there is an active src
     // and the content containing the image considers it updatable
     if (this._src && this._content.isImgsUpdatable()) {
-      if (this.canRequest && (this._src !== this._renderedSrc && this._src !== this._requestingSrc) && !this._tmpDataUri) {
+      if (this.canRequest && (this._src !== this._renderedSrc && this._src !== this._requestingSrc) && !this._hasLoaded) {
         // only begin the request if we "can" request
         // begin the image request if the src is different from the rendered src
         // and if we don't already has a tmpDataUri
         console.debug(`request ${this._src} ${Date.now()}`);
         this._requestingSrc = this._src;
 
-        this._cb = (status, msg, datauri) => {
-          this._loadResponse(status, msg, datauri);
-          this._cb = null;
-        };
-
-        // post the message to the web worker
-        this._ldr.load(this._src, this._cache, this._cb);
+        this._isLoaded(false);
+        this._srcAttr(this._src);
 
         // set the dimensions of the image if we do have different data
         this._setDims();
       }
 
-      if (this.canRender && this._tmpDataUri && this._src !== this._renderedSrc) {
+      if (this.canRender && this._hasLoaded && this._src !== this._renderedSrc) {
         // we can render and we have a datauri to render
         this._renderedSrc = this._src;
         this._setDims();
         this._dom.write(() => {
-          if (this._tmpDataUri) {
+          if (this._hasLoaded) {
             console.debug(`render ${this._src} ${Date.now()}`);
             this._isLoaded(true);
-            this._srcAttr(this._tmpDataUri);
-            this._tmpDataUri = null;
           }
         });
       }
     }
   }
 
-  private _loadResponse(status: number, msg: string, datauri: string) {
-    this._requestingSrc = null;
-
-    if (status === 200) {
-      // success :)
-      this._tmpDataUri = datauri;
-      this.update();
-
-    } else {
-      // error :(
-      if (status) {
-        console.error(`img, status: ${status} ${msg}`);
-      }
-      this._renderedSrc = this._tmpDataUri = null;
-      this._dom.write(() => {
-        this._isLoaded(false);
-      });
-    }
-  }
-
   /**
    * @internal
    */
@@ -297,11 +243,10 @@ export class Img implements OnDestroy {
    * @internal
    */
   _srcAttr(srcAttr: string) {
-    const imgEle = this._elementRef.nativeElement.firstChild;
     const renderer = this._renderer;
 
-    renderer.setElementAttribute(imgEle, 'src', srcAttr);
-    renderer.setElementAttribute(imgEle, 'alt', this.alt);
+    renderer.setElementAttribute(this._img, 'src', srcAttr);
+    renderer.setElementAttribute(this._img, 'alt', this.alt);
   }
 
   /**
@@ -409,11 +354,25 @@ export class Img implements OnDestroy {
    */
   @Input() alt: string = '';
 
+  /**
+   * @private
+   */
+  ngAfterContentInit() {
+    this._img = this._elementRef.nativeElement.firstChild;
+
+    this._unreg && this._unreg();
+    const opts = eventOptions(false, true);
+    this._unreg = listenEvent(this._img, 'load', false, opts, () => {
+      this._hasLoaded = true;
+      this.update();
+    });
+  }
+
   /**
    * @private
    */
   ngOnDestroy() {
-    this._cb = null;
+    this._unreg && this._unreg();
     this._content && this._content.removeImg(this);
   }