Show loading gif while image is loading

Question

I made some code where the user can upload some images from a zip. On the next page I need to show all the images seperatly in a 85*85 px frame.

The problem is that

Answer 1

Angular 8 Solution with Hostlistener and Hostbinding.

1. Create a simple attribute directive

import { Directive, HostListener, Input, HostBinding } from '@angular/core';
@Directive({selector: '[imageLoader]'})
export class ImageLoaderDirective
{
  @Input('src') imageSrc;
  @HostListener('load')
  loadImage()
  {
  this.srcAttr=this.imageSrc;
  }

@HostBinding('attr.src') srcAttr="../../assets/pics/Loader.svg"
constructor() { }
}

Basically we set the initial image source to the loader image. Once the image loads(load event triggered), we listen to it and set the image source to the actual image.

2. Now use the just need to use the created attributes on your images.

Using svg requires no styling changes, gif may require css changes.

You can visit the website for working implementation.