隐藏时阻止图像上传

Question

I'm working on responsive web application, and when I use mobile devices I have noticed that the hiding images are uploaded in the network of the browser. Therefore is not a good thing for the performance of the application and i want to stop upload these images when im using mobile device. In my HTML I have used a css style for each device and variables to display the image in normal browser and I hide it in mobile device (using *ngIf) but it doesn't prevent it from uploading the image. can you please help to solve this optimization issue and what is the best way to do it. I'm working with Angular 8 and i don't want to use jQuery.

Thanks in advance

Answer 1

loadIt() {
    if(imageIsInFront) {
    mustBeLoaded = true;
    }
}

<div *ngFor="let img of images, let i=index">
  <img *ngIf="mustBeLoaded" (load)="loadIt()" [src]="img">
</div>

not tested