Question

我正在为Android和ios创建PWA。在android中没有图像加载问题..但是在ios野生动物园和网络应用程序中，加载图像会有延迟。（假设我连续有5张图像。第一个图像将在第二个图像之后加载，然后在第3个图像上依次加载）。我希望在所有图像都放置在标签之后加载整个组件。

为此，我做了这样的事情

.ts文件

// data = [{imgSrc:'local address'},..]
public loaded: boolean = false;

this.getData.subscribe((data) => {
  this.images = data;
  this.loaded = true;
  // tried like this also  setTimeout(() => loaded = true, 1000); 
});

.html文件

<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>

Answer 1

首先，您可以预加载这些图像。

    let images = new Array();
    function preload(preloadImages) {
        for (i = 0; i < preloadImages.length; i++) {
            images[i] = new Image()
            images[i].src = preloadImages[i];
        }
    }
    this.getData.subscribe( (data)=>{   
      this.preload(data);   // this will preload the images
      setTimeout(()=>{
          this.images = [{imgSrc:'local address'},..];
          this.loaded = true;
     }, 500);
    });

iPhone图像在webapp和safari中加载缓慢

1 个答案: