Question

我正在使用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">

还有许多其他变种，要么在某些情况下不起作用。

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

Answer 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 并正确附加我们的额外参数。但这应该适用于您的情况。

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

1 个答案: