【发布时间】：2014-01-26 11:14:08
【问题描述】：
我们正在使用 Chrome 进行交互式安装，并且似乎遇到了某种图像加载上限。
该应用专为多点触控设备而构建，运行分辨率为 1920x1080。它建立在主干之上，涉及渲染和删除大量包含精灵动画的视图（通过透明 png 背景图像的步进来促进）。
我们正在使用 David Desandro 的 imagesloaded 插件预加载所有图像并监听完成。这起初工作得很好（资产较少），现在似乎工作，直到您进一步导航到应用程序。尽管控制台中没有 404 并且已确认存在文件，但某些图像未加载并且根本不会出现。即使我们不预加载图像，问题仍然存在。
动画序列的典型大小是 92250px x 450px，它们的大小在 1mb 到 10mb 之间（这是在使用 grunt-contrib-imagemin 后面的压缩器优化之后）。图片资源总大小约为 300mb。
我们的尝试：
- 在启动 chrome (http://peter.sh/experiments/chromium-command-line-switches/) 时在 chrome 命令行参数中应用任何与缓存相关的标志，例如
--disk-cache-size。 - 使用 HTML5 缓存清单缓存所有媒体资产。
- 在不同的机器上进行测试，包括 mac 和 PC。这会产生相同的结果。
我们目前正在尝试什么：
- 通过删除动画中的每隔一帧来减小所有图像的大小。这并不理想。
- 更改动画方法以切换（预加载）单个图像而不是精灵。
- 在即将添加图片之前批量预加载图片（不理想）。
理想情况下，无论我们达到的限制是多少，我们都希望取消上限。任何帮助/见解将不胜感激！
【问题讨论】：
-
如果你只是多次使用同一个图像文件是否仍然会遇到问题（试图确定它可能是资产本身的大小，还是渲染资产所涉及的过程）？跨度>
-
@dtt101 刚刚对此进行了测试：一张图片多次加载没有问题。这似乎是某种内存/渲染树限制......
-
我发现这个“chrome://net-internals/#httpCache”可能有助于调试 - 虽然我相信你已经知道了！
-
@dtt101 谢谢大佬，我去看看！
-
你在 Firefox 上尝试过同样的事情吗？我敢打赌它有效。我有一个类似的问题。我将一堆图像传递给客户端。 Chrome 会跳过其中的一些。
标签： javascript html image google-chrome