切换已下载图片img src时避免浏览器重复请求的实现方法

正常情况下同源、URL完全一致的静态图片，浏览器默认会走缓存不会重复拉取，你遇到重复请求一般是两种情况：

• 服务端返回的图片响应头未配置缓存规则，设置了no-cache/no-store强制每次验证，或者你取到的imgURL和列表里图片的实际缓存键不匹配（比如协议、参数不一致）
• 模态框的图片元素在隐藏/销毁时被清空了src属性，导致浏览器释放了对应图片的内存缓存，重新赋值时触发新请求

按优先级从高到低选择即可：

方案1：直接复用已加载完成的图片节点（无额外依赖，100%避免重复请求） #

不需要改服务端配置，也不用纠结缓存规则，既然列表里的图片已经完成加载，直接克隆已加载的图片节点放到模态框即可，浏览器会直接复用内存里已解码的图片数据，完全不会发起新请求。
把原有代码里给模态框图片赋值src的逻辑替换即可：

$(button).on("click", function () {
  // GET ALL THE INFO NEEDED FOR THE CARD
  const sourceImg = this.querySelector("img");
  const name      = this.querySelector(".__name").innerHTML;
  const position  = this.querySelector(".__position").innerHTML;
  const questions = this.querySelectorAll('[data-js="question"]');
  const answers   = this.querySelectorAll('[data-js="answer"]');

  // POPULATE THE CARD
  employeeCard.querySelector(".__name").innerHTML     = name;
  employeeCard.querySelector(".__position").innerHTML = position;
  
  // 替换原有的src赋值逻辑：克隆已加载的图片节点
  const modalImgSlot = employeeCard.querySelector(".__img").parentElement;
  modalImgSlot.innerHTML = '';
  const clonedImg = sourceImg.cloneNode(true);
  clonedImg.classList.add('__img');
  modalImgSlot.appendChild(clonedImg);

  // CONSTRUCT ANSWERS AND QUESTIONS

  // SHOW THE CARD AFTER 200 MS
  setTimeout(() => {
      $(employeeCard).toggleClass("active");
  }, 200);
});

注意：不要直接把列表里的原图片节点移动到模态框，会导致列表对应位置的图片消失，用cloneNode(true)做深克隆即可。

方案2：配置静态资源缓存规则（根治同URL重复请求问题） #

如果不想调整DOM操作逻辑，可以从缓存规则入手排查：

• 先打印点击时拿到的imgURL，确认和列表渲染时img标签的src值完全一致，没有多余的查询参数、协议差异（比如http/https不匹配、相对路径转绝对路径后出现差异）
• 给服务端的图片资源配置缓存响应头，参考配置：Cache-Control: public, max-age=31536000, immutable，配置后同URL的图片首次加载完成，后续使用时浏览器会直接读取本地缓存，不会向服务端发请求。

方案3：初始化时预加载图片做内存缓存 #

如果页面的按钮图片总量不大，可以在页面初始化阶段就把所有图片预加载存到内存Map里，点击时直接取缓存的图片节点插入模态框：

// 页面初始化完成后执行
const imageCache = new Map();
document.querySelectorAll(button).forEach(btn => {
  const img = btn.querySelector('img');
  const preloadImg = new Image();
  preloadImg.src = img.src;
  imageCache.set(img.src, preloadImg);
});

// 点击事件中需要展示图片时，直接从缓存取克隆即可
const targetImg = imageCache.get(imgURL).cloneNode(true);
targetImg.classList.add('__img');
// 替换模态框内旧图片节点

避坑提醒：不要在模态框关闭时把内部img的src设为空字符串或者删除src属性，这个操作会触发浏览器释放对应图片的内存缓存，下次赋值时会重新发起资源请求。

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