0

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.

Joe Valookaran
  • 1
  • 1
  • https://angular.io/guide/animations – alphapilgrim Mar 14 '23 at 22:28
  • UI looks nice, but you are using `*ngIf` and your template is unnecessarily repetitive. If you decide to not keep all the `*ngIf` I'd suggest putting every image URL in the component and just doing an `*ngFor` over them. Alternatively, a quick performance gain could be made from instead of using the `*ngIf` since it destroys the DOM element every time, Id hide other images if not current containerStyle. – alphapilgrim Mar 14 '23 at 22:50

1 Answers1

0

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!

ryancraigmartin
  • 1
  • 1