在 Angular 中缓存图像

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) 应用程序缓存清单。根据文档，

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

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

尽管这让我谈到了使用渐进式 Web 应用程序（PWA）的主题。由于您使用的是 Angular，因此您可以按照官方 Angular 设置 Service Worker 的指南，轻松将其设置为 PWA（基于 Service Worker 的使用情况）。

Answer 2

这不是缓存图像的正确方法，但是 我们可以使用这种技术。

我们可以将此片段放入应用程序中，

<div style="visibility: hidden;position:absolute;">
  <img src="example.com" />
</div>

因此，图像将被缓存，浏览器可以在需要的地方加载它。

Answer 3

这里可以使用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';
}