How to load image with spinner in angular2

Question

my app got many images with descriptions. When user navigates these text is coming first and image is loading with some delay. I would like to add a spinner here. A directive which shows spinner while loading the image and shows image like

<myimgdir [src]='myimage.png'></myimgdir>

How to add spinner and track the image is loaded or not and display it?

https://webcake.co/a-loading-spinner-in-angular-2-using-ngswitch/ , check this maybe it will guide u.. — SeleM, Jun 21 '16 at 08:21

perezperret · Accepted Answer · 2017-01-23T15:32:31.760

28

In your controller, add a function to to handle the 'onLoad' event, setting the state to {loading: false}:

loading: boolean = true
onLoad() {
    this.loading = false;
}

In your template, render a loading gif (or whatever you want) while the state has loading === true, the tricky part is that you should just hide the img element with [hidden]="true/false" as opposed to prevent it from rendering so it will actually load the src, then just bind the onLoad function in your controller to the (load) event on the actual image:

<img *ngIf="loading" src="/assets/loading.gif" alt="loading" />
<img [hidden]="loading" (load)="onLoad()" src="{{ source }}" />

This solution is functionally the same as AngJobs's, but it's more declarative and a little less cumbersome IMO.

PS: Using [hidden]="boolean" instead of *ngIf is a bit of a gotcha, you should look to http://angularjs.blogspot.com/2016/04/5-rookie-mistakes-to-avoid-with-angular.html to understand why and for a solution on how to apply it safely.

edited Jan 23 '17 at 15:32

answered Aug 08 '16 at 20:04

perezperret

316
2
7

Your 2nd code block looks weird. You seem to pass angular bindings to a `img(...)` function call. – Günter Zöchbauer Jan 22 '17 at 13:53
@GünterZöchbauer That's a mistake, I didn't clarify I was using `jade/pug` syntax. That block you mention is markup, not JavaScript, I will edit it to use HTML syntax – perezperret Jan 23 '17 at 15:31
I see. Never used that myself. – Günter Zöchbauer Jan 23 '17 at 15:36
Do you think this could be a directive you use on multiple images? – Jeff Apr 08 '17 at 23:23

score 9 · Answer 2 · answered May 22 '18 at 07:32

You dont need a function here, just add to your component:

imageLoader = true;

In template add following:

<div [hidden]="!imageLoader">Loading...</div>
<img [hidden]="imageLoader" src=".../image.png" (load)="this.imageLoader = false;" />

... as you see, there is text instead of a gif beacause actually a loading animation gif also must be loaded. In some cases this could take much more time, than loading the image itself.

If the gif is loaded already you can use:

<img [hidden]="!imageLoader" src=".../loading_spinner.gif" />
<img [hidden]="imageLoader" src=".../image.png" (load)="this.imageLoader = false;" />

score 2 · Answer 3 · answered Jan 22 '17 at 13:46

2

I think the most easiest way is to use the onError event on the img element. You can use it Like:

<img [src]="image.src" onError="this.src='assets/my/fancy/loader.gif';">

answered Jan 22 '17 at 13:46

Sephen

1,111
3
16
38

1

But in this case no default image can be rendered if the image load fails, the spinner will continue spinning. Goal is to show gif or spinner untill the loading completes. – d1fficult Jan 27 '21 at 10:47

score 1 · Answer 4 · answered Jun 21 '16 at 08:39

The idea is to display the spinner by default, create a separate Image object that would be displayed when load is complete

 var img = new Image();

    /// set handler and url
    img.onload = onloadHandler;
    img.src = imageURLs[i];

    /// if image is cached IE (surprise!) may not trigger onload
    if (img.complete) onloadHandler().bind(img);

How to load image with spinner in angular2

4 Answers4

Linked

Related