将 cachebreaker 附加到一种类型的所有图像的文件名

Question

我能够识别所有类型 (SVG) 的图像并在控制台日志中附加缓存中断日期字符串。

allImg = document.querySelectorAll('img[src$=".svg"');

imgTime = Date.now();

allImg.forEach(img => console.log(img.src + '#' + imgTime));

我一直在寻找这个解决方案，但它只适用于单个文件名，而不适用于多个图像：

感谢任何帮助。

Answer 1

好的，这是它的工作原理，为页面中的每个 SVG 图像添加一个缓存破坏器：

allImg = document.querySelectorAll('img[src$=".svg"');

imgTime = Date.now();

allImg.forEach(img => {
    //console.log(img.src);
  newImgSrc = img.src + '?' + imgTime;
    //console.log(newImgSrc);
  img.src = newImgSrc;
});

需要注意的是，这会强制 SVG 加载第二次，因此，如果可以将缓存无效化器写入原始 IMG SRC 中，这通常是更可取的。此特定用例中的站点限制意味着这不是一个选项。

将 cachebreaker 附加到一种类型的所有图像的文件名

Append cachebreaker to filenames of all images of a type

javascript

for-loop

filenames

browser-cache