Geek Answers Handbook

Show download icon when uploading images

I want to show a background image / boot spinner inside a div that will load the image inside it, the image will show how it will fully load by doing something like this:

  <div style="background-image:url('imageThatWillAppearBeforeLoad')"></div>

Demo (in jQuery)

How can I use the same with Angular2 / Ionic2?

+5
source share
2 answers

Create a component that shows the placeholder image before loading the downloaded image, and hides the requested image. After loading the image, you will hide the placeholder and show the image.

 @Component({ selector: 'image-loader', template: `<img *ngIf="!loaded" src="url-to-your-placeholder"/> <img [hidden]="!loaded" (load)="loaded = true" [src]="src"/>` }) export class ImageLoader { @Input() src; }

See how Plunker works.

Update

Now that I have a better understanding of the requirements, here is a solution with a background image. It's a bit hacky and I like how the original is better ...

 @Directive({ selector: '[imageLoader]' }) export class ImageLoader { @Input() imageLoader; constructor(private el:ElementRef) { this.el = el.nativeElement; this.el.style.backgroundImage = "url(http://smallenvelop.com/demo/image-loading/spinner.gif)"; } ngOnInit() { let image = new Image(); image.addEventListener('load', () => { this.el.style.backgroundImage = `url(${this.imageLoader})`; }); image.src = this.imageLoader; } }

Updated plunker .

+12
source

Here is a copy of one of my posts

I finally solved this CSS issue! When the image is loaded in ionic 2, the ion-img label has no class. However, when the image is finally loaded, the ion-img label gets the class "img-loaded".

Here is my solution:

  <ion-img [src]="img.src"></ion-img> <ion-spinner></ion-spinner>

And my CSS:

 .img-loaded + ion-spinner { display:none; }
+3
source

More articles:


All Articles