javascript - prevent image's upload when it's hidden

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

question from:https://stackoverflow.com/questions/65920528/prevent-images-upload-when-its-hidden

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