三分钟教你调试白鹭引擎Egret Runtime 游戏

1、当然更好的体验是提供加载进度，不过我们首先从单独的图片做起。首先，我们有一个现成的 Egret 2.5.3 项目。准备这样一张有动画效果的 loading 图片：

2、放到项目的 resource/assets 目录中在项目的 index.html 文件中加入一个div标签，用来显示这个图片：

3、需要注意的一点，就是这个 div 元素的位置。考虑到这个图片在页面中的作用，应该尽可能早的显示这张图片。 所以这个包含 preloading 的 div 元素要放到其他的 script 元素之前，这样整个页面就将首先加载 preloading 图片。考虑布局，为了使 preloading 图片显示在正中位置，我们给其设定一些简单的 CSS 样式：

4、注意，样式设置中包含一个 z-index 属性，该项设置保证了 Egret程序本身所在的 egret-player元素出现在页面后不会将 preloading 元素遮挡。因为即便 egret-player 元素已经呈现出 Canvas 元素，也不能保证 Egret 程序的内容就能立即呈现。并且基于这个原因，我们将在整个HTML页面的所有其他脚本执行完毕后再隐藏 preloading 图片。也就是添加到 index.html 最底部的 script 元素中原有代码的后边，成为：

5、至此，编译运行 Egret 项目，就可以看到在Egret程序内容显示之前会 preloading 图片在转动了。