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