I am currently developing a Progressive Web App (PWA) for Android and iOS. While I have not encountered any issues with image loading on Android, there seems to be a delay when loading images on iOS Safari and the web app version. Specifically, when displaying 5 images in a row, they load sequentially instead of all at once. I want the entire component to load only after all the images have been placed within their tags.
To address this issue, I implemented the following solution:
.ts file
// data = [{imgSrc:'local address'},..]
public loaded: boolean = false;
this.getData.subscribe((data) => {
this.images = data;
this.loaded = true;
// I also tried using setTimeout(() => loaded = true, 1000);
});
.html file
<loader *ngIf="!loaded"></loader>
<div *ngIf="(loaded)">
<ul>
<li *ngFor="let item of images; let i=index;">
<span [style.backgroundImage]="'url('+ item.imgSrc +')'" </span>
</li>
</ul>
</div>