javascript - 谷歌浏览器图像天花板？

Question

我们正在使用 Chrome 进行交互式安装，似乎遇到了某种图像加载上限。

该应用专为多点触控设备构建，运行分辨率为 1920x1080。它建立在 backbone 之上，涉及渲染和删除大量包含 Sprite 动画的 View (通过步进透明 png 背景图像来促进)。

我们使用 David Desandro 的 imagesloaded 插件预加载所有图像并监听完成。起初它运行良好( Assets 较少)并且现在似乎可以运行，直到您进一步导航到应用程序。尽管控制台中没有 404s，并且确认文件存在，但一些图像没有加载，根本就没有出现。即使我们不预加载图像，问题仍然存在。

动画序列的典型大小为 92250px x 450px，每个大小在 1mb 到 10mb 之间(这是在使用 grunt-contrib-imagemin 背后的压缩器优化之后)。图片 Assets 总计约 300mb。

我们的尝试:

1. 在启动 chrome ( http://peter.sh/experiments/chromium-command-line-switches/ ) 时在 chrome 命令行参数中应用任何与缓存相关的标志，例如 --disk-cache-size。
2. 使用 HTML5 缓存 list 缓存所有媒体 Assets 。
3. 在不同的机器上进行测试，包括 Mac 和 PC。这会产生相同的结果。

我们目前正在尝试的:

1. 通过删除动画中的每隔一帧来减小所有图像的大小。这并不理想。
2. 更改动画方法以切换(预加载)单个图像而不是 Sprite 。
3. 在图像即将添加之前分批预加载图像(不理想)。

理想情况下，无论我们达到什么限制，我们都希望取消上限。任何帮助/见解将不胜感激!

Answer 1

虽然我们还没有真正查明导致此问题的原因，但我们已经实现了解决方法。关闭单个 PNG 帧的大型 Sprite 表动画就可以完成这项工作。我仍然有兴趣确切了解问题/限制是什么以供将来引用...