From 070133848409773bc104684aefb33c2cb6e9dbe5 Mon Sep 17 00:00:00 2001
From: Adam Bradley <adambradley25@gmail.com>
Date: Tue, 5 Apr 2016 14:49:02 -0500
Subject: [PATCH] fix(img): only load ion-img when visible

---
 ionic/components/img/img.scss |  2 +-
 ionic/components/img/img.ts   | 10 ++++++++--
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/ionic/components/img/img.scss b/ionic/components/img/img.scss
index e5d49e7d1f..383661f4b8 100644
--- a/ionic/components/img/img.scss
+++ b/ionic/components/img/img.scss
@@ -20,7 +20,7 @@ ion-img .img-placeholder {
   width: 100%;
   height: 100%;
 
-  background: #ddd;
+  background: #eee;
 
   transition: opacity 200ms;
 }
diff --git a/ionic/components/img/img.ts b/ionic/components/img/img.ts
index 6279d588d0..22c0c683f1 100644
--- a/ionic/components/img/img.ts
+++ b/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;