iphone图像在webapp和safari中加载缓慢答案

【问题标题】：iphone image loading slow in webapp and safariiphone图像在webapp和safari中加载缓慢
【发布时间】：2018-10-15 21:00:39
【问题描述】：

我正在为 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>

【问题讨论】：

为什么要等待所有图片加载完毕？这似乎不是最佳做法。
在我的 UI 中，加载图像之前出现白色空白屏幕。我不希望它...我希望我的组件显示所有内容。
每张图片的尺寸是多少？
18KB @SureshKumarAriya
这是预期的行为。 delay 表示下载图像和更新 DOM 所花费的时间。如果你想要更快的 DOM 更新。可以用代替 span

标签： javascript css angular loading

【解决方案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);
    });

【讨论】：

我尝试预加载图像，但行为仍然相同.. 在 android 中完美加载，但在 ios safari 中加载缓慢。