diff --git a/src/components/img-loader.ts b/src/components/img-loader.ts index 645d506..00a8c29 100644 --- 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: '', + template: '', 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 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 index b008c8b..bc0db57 100644 --- 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