JavaScript图片预加载与避免同图重复下载的Angular画廊实现问题

问题背景 #

我正在开发一个包含图片画廊的Angular应用，画廊基础结构为单张图片展示区搭配「上一张」「下一张」两个操作按钮，以下是该画廊的极简非Angular实现代码：

<html>
<style>
    img {
        display: block;
        height: 300px;
    }
</style>

<body>
    <img id="img"></img>
    <button id="prevB">Prev</button>
    <button id="nextB">Next</button>

    <script>
        var arr = [
            "https://firebasestorage.googleapis.com/v0/b/animaps-e8f7a.appspot.com/o/EugywRZ814yCMrMhopVF%2F3c.jfif?alt=media&token=d6ab88bc-5065-4dbc-ab9d-884a9af1380b",
            "https://firebasestorage.googleapis.com/v0/b/animaps-e8f7a.appspot.com/o/4KzYH8gMDjhKHFrTIXlB%2F1c.jpg?alt=media&token=9cd7bed2-c645-408c-acd5-77fdd9370389",
            "https://firebasestorage.googleapis.com/v0/b/animaps-e8f7a.appspot.com/o/ftGGK4Wj1ski8lJi1TRE%2F5a.jfif?alt=media&token=4a36d9c5-924f-4738-9851-cf057de74544",
        ]

        var index = 0;
        document.getElementById("prevB").addEventListener("click", () => {
            index--;
            document.getElementById("img").src = arr[index % arr.length];
        });
        document.getElementById("nextB").addEventListener("click", () => {
            index++;
            document.getElementById("img").src = arr[index % arr.length];
        });
        document.getElementById("img").src = arr[index];
    </script>
</body>

问题1：图片重复下载原因与缓存方案 #

问题描述：每次点击上一张/下一张按钮时，即便对应图片已经下载过，浏览器仍会重新发起下载请求，如下所示：

原因 #

• 当前使用的Firebase Storage资源默认没有配置缓存响应头，浏览器无法判断资源是否可以复用，每次访问相同URL都会重新发起请求校验。
• 若打开了浏览器开发者工具的「禁用缓存」选项，会强制所有资源不使用本地缓存，每次都重新下载。

解决方法 #

1. 配置Firebase Storage缓存规则：在Firebase控制台的Storage规则中添加Cache-Control响应头配置，示例如下：

rules_version = '2';
service firebase.storage {
  match /b/{bucket}/o {
    match /{allPaths=**} {
      allow read: if true;
      responseHeaders: {
        "Cache-Control": "public, max-age=86400", // 缓存1天，可自行调整时长
        "Content-Disposition": "inline"
      }
    }
  }
}

2. 关闭开发者工具的「禁用缓存」开关：调试阶段确认网络面板的「禁用缓存」选项未勾选。

问题2：全量图片预加载方案 #

需求为页面加载时就完成全部图片列表资源的下载，点击切换按钮时可立即展示对应图片，以下提供两种实现方案：

纯JavaScript实现方案 #

通过提前创建Image对象加载所有图片，加载完成的资源会存储在浏览器内存中，后续直接赋值src不会重复发起请求：

const imageArr = [
  "图片链接1",
  "图片链接2",
  "图片链接3"
];

// 预加载函数
function preloadAllImages(urls) {
  urls.forEach(url => {
    const img = new Image();
    img.src = url;
  });
}

// 页面加载完成后触发预加载
window.addEventListener('load', () => preloadAllImages(imageArr));

Angular专属实现方案 #

在组件初始化阶段执行预加载逻辑，示例代码如下：

组件类代码

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

@Component({
  selector: 'app-image-gallery',
  templateUrl: './image-gallery.component.html',
  styleUrls: ['./image-gallery.component.css']
})
export class ImageGalleryComponent implements OnInit {
  // 图片列表
  imageList = [
    "图片链接1",
    "图片链接2",
    "图片链接3"
  ];
  currentIndex = 0;
  // 当前展示图片
  currentImgSrc = this.imageList[this.currentIndex];

  ngOnInit(): void {
    // 组件初始化时执行预加载
    this.preloadImages();
  }

  preloadImages(): void {
    this.imageList.forEach(url => {
      const img = new Image();
      img.src = url;
    });
  }

  // 上一张
  showPrev(): void {
    this.currentIndex = (this.currentIndex - 1 + this.imageList.length) % this.imageList.length;
    this.currentImgSrc = this.imageList[this.currentIndex];
  }

  // 下一张
  showNext(): void {
    this.currentIndex = (this.currentIndex + 1) % this.imageList.length;
    this.currentImgSrc = this.imageList[this.currentIndex];
  }
}

模板代码

<img [src]="currentImgSrc" style="display: block; height: 300px;">
<button (click)="showPrev()">上一张</button>
<button (click)="showNext()">下一张</button>

内容的提问来源于stack exchange，提问作者cpper