时间戳

首页 > 解决方案 > 防止在路线更改时重新加载图像 - Angular 6

angular - 防止在路线更改时重新加载图像 - Angular 6

问题描述

我的 Angular 应用程序中有一个组件。它有一个 div，它的背景图像设置为组件类中的一个变量，如下所示：

<div class="home-background" [style.background-image]="'url('+ bgImage +')'">.......</div>

每当我导航到这个组件时，在 chrome 的网络选项卡中，我可以看到它每次都重新获取背景图像。图像大小为 500Kb，显示半秒空白区域。

有没有办法强制 div 使用缓存的图像，而不是在每次导航到该组件时从服务器获取它？

标签： angularbrowser-cacheimage-caching

解决方案

我写了一篇文章，逐步解释如何将 PWA 功能注入 Angular 项目。
你可以在这里阅读更多。

正如已经建议的那样，您可以使用服务工作者来缓存资产。

如果您在 CLI 中运行以下命令（Angular 添加原理图）：

ng add @angular/pwa

它将为您设置几乎所有内容（您可以在上面链接的我的文章中找到所有详细信息）。

默认情况下，上面的命令将使用惰性策略asset缓存文件夹中的所有文件（这意味着它们将在至少被请求一次后被缓存）。

在生成的文件下方：

{
  "$schema": "./node_modules/@angular/service-worker/config/schema.json",
  "index": "/index.html",
  "assetGroups": [
    {
      "name": "app",
      "installMode": "prefetch",   <- Those files are cached immediately by the SW
      "resources": {
        "files": [
          "/favicon.ico",
          "/index.html",
          "/*.css",
          "/*.js"
        ]
      }
    }, {
      "name": "assets",
      "installMode": "lazy",     <- Those files are cached after a first request
      "updateMode": "prefetch",
      "resources": {
        "files": [
          "/assets/**",
          "/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)"
        ]
      }
    }
  ]
}

如果您想急切地提供这些图像并让它们即使用户离线也可用，您可以installMode: prefetch在上一个命令为您创建的配置文件中进行设置 (ngsw-config.json)。

有了这个，您将能够从缓存中传递图像，您还可以设置生命周期。在本文中，我还描述了如何缓存 API GET 请求，如果您想进一步改进您的应用程序。

推荐阅读