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?
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';">
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With