如何防止在json中引用的spritesheet图像缓存？答案

【问题标题】：How to prevent caching of spritesheet image, referenced in json?如何防止在json中引用的spritesheet图像缓存？
【发布时间】：2017-07-29 16:36:43
【问题描述】：

我正在使用 PIXIJS 引擎和 TexturePacker。为了防止文件缓存我使用：

<script type="text/javascript">
    var PIXIJS_VERSION = "4.3.5";
    var VERSION = "0.0.7b";
    document.write('\<script src="lib/pixi.min.js?v=' + PIXIJS_VERSION + '">\<\/script>');
    document.write('\<script src="game.js?v=' + VERSION + '">\<\/script>');
</script>

在我的 game.js 中，我有：

PIXI.loader.add('images/textures.json?v=' + VERSION)
    .add('images/fixedsys.xml?v=' + VERSION)
    .load(setup);

所以我只是更改 VERSION 变量来强制更新。

问题是textures.json是TexturePacker生成的，它包含：

"image": "textures.png"

而且每次手动甚至通过脚本添加 VERSION 都很不方便：

"image": "textures.png?v=..."

PIXI.loader 只能处理 json 文件或文件名，不能处理对象，我不想为这种愚蠢的情况编写复杂的代码。

我也试过这个来完全防止缓存：

<meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate, post-check=0, pre-check=0">

还有许多其他变体，在某些情况下它们都不起作用。

所以我的问题是为什么缓存如此烦人，是否有一种简单而优雅的方式来处理这个问题？

【问题讨论】：

标签： javascript html json caching

【解决方案1】：

这对我有用。

在调用PIXI.loader.add之前，添加如下中间件函数：

// Append the version to each URL to bust the browser cache.
PIXI.loader.pre((resource, next) => { resource.url += `?v=${VERSION}`; next(); });
PIXI.loader.add('images/textures.json')
    .add('images/fixedsys.xml')
    .load(setup);

如果您需要加载具有查询字符串参数的文件，您应该改进中间件函数以解析 URL 并正确附加我们的额外参数。但这应该适合您的情况。

【讨论】：