fix(img): only load ion-img when visible

Author: adamdbradley

ionic/components/img/img.scss

@@ -20,7 +20,7 @@ ion-img .img-placeholder {
   width: 100%;
   height: 100%;
 
-  background: #ddd;
+  background: #eee;
 
   transition: opacity 200ms;
 }

ionic/components/img/img.ts

@@ -1,6 +1,7 @@
 import {Component, Input, HostBinding, ViewChild, ElementRef} from 'angular2/core';
 
 import {isPresent} from '../../util/util';
+import {Platform} from '../../platform/platform';
 
 
 @Component({
@@ -20,7 +21,7 @@ export class Img {
   private _h: string;
   private _enabled: boolean = true;
 
-  constructor(private _elementRef: ElementRef) {}
+  constructor(private _elementRef: ElementRef, private _platform: Platform) {}
 
   @ViewChild('imgA') private _imgA: ElementRef;
   @ViewChild('imgB') private _imgB: ElementRef;
@@ -39,7 +40,7 @@ export class Img {
   }
 
   private _update() {
-    if (this._enabled) {
+    if (this._enabled && this.isVisible()) {
       if (this._useA) {
         this._srcA = this._src;
 
@@ -54,6 +55,11 @@ export class Img {
     this._update();
   }
 
+  isVisible() {
+    let bounds = this._elementRef.nativeElement.getBoundingClientRect();
+    return bounds.bottom > 0 && bounds.top < this._platform.height();
+  }
+
   @HostBinding('class.img-loaded')
   private _loaded: boolean = false;