Wesbite /浏览器游戏:预加载资源

时间:2018-08-01 20:56:18

标签: javascript html performance preloader

所以我做了一些研究,但是没有找到我真正想要的东西。 我找到this question来查看如何预加载图像(我想这也可能适用于视频)

所以问题是我们是否应该预加载资源(视频/图像,而不是CSS或脚本)? 我制作了一个gacha系统(就像移动设备上的gacha游戏一样),您可以在其中“拉”角色,并在每次“拉”之前加载视频。 在本地,一切都是快速而有趣的,但是现在我托管并尝试了它……之所以这么长,是因为尚未进行任何计算。

图像太多,无法在“游戏”开始时预加载全部图像 我虽然想知道如何解决它,但我认为我应该

  • 检查某人将获得的每个字符,并提示一些加载屏幕
  • 从步骤1中预加载与字符列表关联的资源
  • 关闭加载屏幕并进行实际拉动

这看起来还好吗?还有其他方法吗?我进行了搜索,但没有发现其他人如何处理该问题(我有点讨厌搜索内容:/)

1 个答案:

答案 0 :(得分:0)

嗯,您已经提到它了。您将需要预加载向用户显示“快速”所需的所有内容。在游戏之前放置一个加载屏幕,列出所有关键资源并进行加载。您可以通过创建图像和视频各自的对象并收听“加载”事件来加载图像和视频。加载完所有关键资源后,开始游戏。

确保服务器配置了正确的长缓存头,因此您的玩家不必再次下载资源,而无需重新访问游戏。

当游戏开始时,您甚至可以继续并在后台继续加载不太重要的资源。如果用户遇到尚未加载的图形/视频,请改为显示一个占位符,并可能将缺少的资源重新排队到加载列表的顶部。

您可以在此处做很多工作来优化负载。我会给出的第一条建议:通过使用kraken.io(例如用于图像)来使资产尽可能小(不确定视频是否存在类似内容)。

还要尝试在服务器上启用http / 2-这将在使用许多资产时提高加载速度。如果由于某些原因而无法使用http / 2,请尝试合并您的资产-例如查找spritemaps。视频也可以合并为一个,并且您只能播放要在游戏的各个区域中播放的部分。