How do I load images on angular more fluidly?

Question

I am creating an angular project where I am loading image files. Is there a way to make the image load more fluidly? Right now they are loading a little choppy.Here is the website so that you can see how the images are loading (every 5 seconds a new image will load) https://joevalook.github.io/weather-app/ and here is my repository: https://github.com/joevalook/weather-app

I have tried making the files smaller with a converter, but was wondering if there was some way to do it via angular.

Answer 1

Splitting up your app into separate components and using some loops and new variables along with the ngIfs you started implementing will help make things more clean and readable:

public imageMap = {
  containerThunder: {
    src: 'assets/thunderstorm-min.jpg',
    alt: 'Thunder Storm',
  },
  containerSnowDay: { src: 'assets/snowDay-min.jpg', alt: ' Snowy Day' },
  containerSnowNight: {
    src: 'assets/snowNight-min.jpg',
    alt: ' Snowy Night',
  },
...etc

<div [ngClass]="containerStyle" *ngIf="weatherData">
<ng-container *ngFor="let image of imageMap | keyvalue; trackBy: image.key">
    <img
      *ngIf="containerStyle === image.key"
      [src]="image.value.src"
      [alt]="image.value.alt"
    />
  </ng-container>
...etc
</div>

The latest versions of Angular include the NgOptimizedImage directive as part of the @angular/common library which you could start to use to help with image lazy loading and prioritization. For even more performance improvements, you could also consider testing out Cloudinary's free tier which is incredibly easy to use for optimizing your images on the fly so that you can remove your assets from the build and slim down your bundle. Currently you have almost 10Mb of image assets in that folder which significantly impact your performance.

Hope this helps you Joe!