Question

我大约有300种设计，并且一次加载全部。我想缓存这些图像，而不是每次都调用服务器。（我的情况大部分时间都不会改变）。下面是我如何加载它们的代码。缓存它们的最佳方法是什么。

app-thumbnail是一个不同的组件，我只在其中加载图像。

 <div *ngFor="let design of designs">
      <div (click)="showDesignDetails(design.designId)">
          <app-thumbnail [designId]="design.designId"></app-thumbnail>          
      </div>
    </div>

Answer 1

我可以想到两种方式：

1）Application Cache Manifest。根据文档，

开发人员可以使用应用程序缓存（AppCache）接口来指定浏览器应缓存的资源并提供给离线用户。缓存的应用程序加载并正常工作即使用户离线时也单击刷新按钮。

2）Service Workers。通过使用服务人员，您可以缓存各种类型的资源，包括图像和网络请求。

尽管这使我想到了使用Progressive Web Applications（PWA）的主题。由于您使用的是Angular，因此可以按照官方的Angular guide来设置服务人员，轻松地将其设置为PWA（基于服务人员的使用情况）。

Answer 2

在这里您可以使用ng-lazyload-image

一个小库，用于为零依赖的Angular应用延迟加载图像

npm install ng-lazyload-image

import { Component } from '@angular/core';

@Component({
  selector: 'image',
  template: `
    <img [defaultImage]="defaultImage" [lazyLoad]="image">
  `
})
class ImageComponent {
  defaultImage = 'https://www.placecage.com/1000/1000';
  image = 'https://images.unsplash.com/photo-1443890923422-7819ed4101c0?fm=jpg';
}

在Angular中缓存图像

2 个答案: