How could I do to know when an image has been fully loaded and then show it? Let me explain: I'm showing an image in the following way:
<img src = "www.domain.com">
but there are times it takes to load and I want to show it only when it is ready to show (100% loaded), as you might know when Is 100% loaded that image? and I would like to show a loading spinner while the loading of that image is complete, I am using angular 7.
There is no difference in how you would check it in Angular or in js.
You need to check for img.complete flag or wait for image.onLoad event to be fired.
Angular directives allow us to handle such behaviors of element, so let's create a directive:
import { Directive, Output, EventEmitter, ElementRef, HostListener, OnInit } from '@angular/core';
@Directive({
selector: 'img[loaded]'
})
export class LoadedDirective {
@Output() loaded = new EventEmitter();
@HostListener('load')
onLoad() {
this.loaded.emit();
}
constructor(private elRef: ElementRef<HTMLImageElement>) {
if (this.elRef.nativeElement.complete) {
this.loaded.emit();
}
}
}
Now you can catch when an image has been loaded by simple code:
<img src="..." alt="" (loaded)="do whatever you want here">
load event but you have to check complete property because there can be a case when image is being loaded from cache so (load) event will never be fired(load)="do smth" instead of creating directive and using (loaded)="..."
(load)event