feat(): ability to use fallbackUrl as placeholder instead of spinner (#…

…36) * added ability to use fallbackUrl as placeholder instead of spinner * added ability to use fallbackUrl as placeholder instead of spinner, fix * code style
zyra · Apr 18, 2017 · c2686c7 · c2686c7
1 parent f29d630
commit c2686c7
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 4 deletions.
diff --git a/src/components/img-loader.ts b/src/components/img-loader.ts
@@ -4,7 +4,7 @@ import { ImageLoaderConfig } from '../providers/image-loader-config';
 
 @Component({
  selector: 'img-loader',
- template: '<ion-spinner *ngIf="spinner && isLoading"></ion-spinner>',
+ template: '<ion-spinner *ngIf="spinner && isLoading && !fallbackAsPlaceholder"></ion-spinner>',
  styles: ['ion-spinner { float: none; margin-left: auto; margin-right: auto; display: block; }']
 })
 export class ImgLoader implements OnInit {
@@ -34,6 +34,11 @@ export class ImgLoader implements OnInit {
  */
  @Input() spinner: boolean = this._config.spinnerEnabled;
 
+ /**
+ * Whether to show the fallback image instead of a spinner while the image loads
+ */
+ @Input() fallbackAsPlaceholder: boolean = this._config.fallbackAsPlaceholder;
+
  /**
  * Use <img> tag
  */
@@ -106,12 +111,17 @@ export class ImgLoader implements OnInit {
  ) { }
 
  ngOnInit(): void {
+ if(this.fallbackAsPlaceholder && this.fallbackUrl) {
+ this.setImage(this.fallbackUrl, false);
+ }
+
  if (!this.src) {
  // image url was not passed
  // this can happen when [src] is set to a variable that turned out to be undefined
  // one example could be a list of users with their profile pictures
  // in this case, it would be useful to use the fallback image instead
- if (this.fallbackUrl) {
+ // if fallbackUrl was used as placeholder we do not need to set it again
+ if (!this.fallbackAsPlaceholder && this.fallbackUrl) {
  // we're not going to cache the fallback image since it should be locally saved
  this.setImage(this.fallbackUrl);
  } else {
@@ -153,8 +163,8 @@ export class ImgLoader implements OnInit {
  * Set the image to be displayed
  * @param imageUrl
  */
- private setImage(imageUrl: string): void {
- this.isLoading = false;
+ private setImage(imageUrl: string, stopLoading: boolean = true): void {
+ this.isLoading = !stopLoading;
 
  if (this._useImg) {
 

diff --git a/src/providers/image-loader-config.ts b/src/providers/image-loader-config.ts
@@ -7,6 +7,8 @@ export class ImageLoaderConfig {
 
  spinnerEnabled: boolean = true;
 
+ fallbackAsPlaceholder: boolean = false;
+
  backgroundSize: string = 'contain';
 
  backgroundRepeat: string = 'no-repeat';
@@ -55,6 +57,14 @@ export class ImageLoaderConfig {
  this.spinnerEnabled = enable;
  }
 
+ /**
+ * Enable/Disable the fallback image as placeholder instead of the spinner. Defaults to false.
+ * @param enable {boolean} set to true to enable
+ */
+ enableFallbackAsPlaceholder(enable: boolean): void {
+ this.fallbackAsPlaceholder = enable;
+ }
+
  /**
  * Sets the cache directory name. Defaults to 'image-loader-cache'
  * @param name {string} name of directory