javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-20 12:29:55 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Adam Bradley
2016-04-05 14:49:02 -05:00
parent 910d56b0e4
commit 0701338484
2 changed files with 9 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
ionic/components/img/img.scss
View File

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

10
ionic/components/img/img.ts
View File

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