制作 HTML5 AssetLoader，浏览器总是缓存图片吗？

Question

我正在为一个简单的 HTML5 面向对象游戏引擎构建一个资产加载器。现在我知道制作资产加载器的两种方法（总结如下），我更喜欢第二种方法。我的问题是，第二种方式是否保证始终适用于所有浏览器？

为了清楚起见：

• 相关类的名称是 AssetLoader，
• 加载所有资产的方法称为loadAssets()，
• 主类是游戏，
• 主游戏循环是 runGameloop()。

方法 1

创建一个将在整个游戏中持续存在的 AssetLoader 实例。当在游戏开始时调用 loadAssets() 时，它会创建一个字典，在游戏期间保存所有资产的键/值对。

当 sprite 需要图像时，它会使用给定名称（例如“Archer”）查询 AssetLoader，并且实例将返回适当的图像供 sprite 使用。

方法2

创建一个不会在整个游戏中持续存在的 AssetLoader 实例（它将被调用一次并且不会分配给任何实例变量）。

实例的职责是向服务器查询每个资产，这将导致浏览器缓存资产；很像：

function AssetLoader()
{

    ...

    self.loadAssets = function(runGameloop)
    {
        self.tempImage = new Image();

        $(self.tempImage).load(function()
        {
            self.assetsLoadedSoFar += 1;
            if(self.assetsLoadedSoFar === self.totalAssets)
            {
                self.runGameloop();
            }
        });

        self.tempImage.src = "assets/sprites/archer/archerSpriteSheet.png";
    }

    ...

}

现在，当一个精灵需要一张图片时，该图片现在应该被缓存在浏览器中，它只是用一个新的 Image() 对象加载它，而无需通过 AssetLoader。

为什么我更喜欢方法 2
1.) 我想避免向引擎引入不必要的抽象层，我不想每次加载资产时都必须通过 AssetLoader。
2.) 如果我在游戏中有很多资产，我不希望它们全部同时加载到 AssetLoader 的单个实例中。也许有人可以纠正我，但一次加载所有这些资源不会给游戏带来不必要的压力吗？

所以现在我有一个工作版本的方法 2 here 并且对它非常满意，但我需要知道的是：“浏览器是否保证始终使用方法 2 缓存给定的图像？” 或者那是我不能依赖的东西？是否有某些配置可能会关闭自动缓存？ （这甚至可能吗？）。您还有其他您认为更好的方法吗？非常感谢您的宝贵时间！

Answer 1

我认为您不能依赖浏览器缓存。可以禁用自动缓存，我想人们这样做是相当普遍的。

我过去就是这样做的，原因有两个：

1. 家庭共享计算机上的磁盘空间不足（多个单独的帐户）
2. 在开发时，为了保证最新的改动在页面刷新时始终可见

此外，在 Chrome / Firefox 的隐身 / 隐私浏览模式中禁用缓存。