先加载首段可玩内容
按资源最早需要的时机分组:标题和首个场景、下一个关卡,然后是可选特效或装饰内容。启用开始操作前,先加载并验证第一组。对于突然切换场景时要用的图像,HTMLImageElement.decode() 会在图像解码完成后兑现 Promise,这样切换时下一次绘制就不必等待解码。
在网络受限时测试:延迟一个必需图像的加载,并让另一个图像加载失败。进度指示器只能在已列出的工作完成后前进;失败的资源应显示可恢复的提示或使用替代资源;缺少必需依赖时,开始按钮不能声称场景已经可玩。
如实显示加载进度
如果任务总数已知,可以显示已完成任务数/总任务数,或显示“正在准备第一关”等阶段。只有知道相关资源大小时,按字节计算的百分比才有意义;传输结束后,图像解码、音频设置和程序化初始化仍可能需要时间。
不要因为可稍后加载的资源而阻塞整个界面。可选美术资源可以先用轻量占位图,解码完成后再替换。检查占位图在目标 Canvas 尺寸下仍清晰可辨,也要确保可选下载失败不会让玩家困在加载界面。
关于页游资源加载的常见问题
预加载所有资源是个好主意吗?
通常不是默认的。加载第一个可玩时刻所需的内容,然后根据使用时间和需要多少内存来安排其他工作。
图像加载事件是否意味着它已准备好进行平滑绘制?
图像数据可能已经传输完成,但解码仍会影响画面呈现。MDN说明,decode() 返回的 Promise 会在图像解码完成并可安全添加时兑现。请测量这种差异是否会影响你的场景。
延伸阅读
发现信息过时了? 报告需要更正的内容