时间戳

首页 > 解决方案 > iphone图像在webapp和safari中加载缓慢

javascript - iphone图像在webapp和safari中加载缓慢

问题描述

我正在为 android 和 ios 创建一个 PWA。在 android 中没有图像加载问题.. 但在 ios safari 和 web 应用程序中加载图像有延迟。（假设我连续有 5 张图片。第 1 张图片将在第 2 张图片之后加载，然后再加载第 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>

标签： javascriptcssangularloading

解决方案

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

    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);
    });

推荐阅读