本次教程教大家如何在Hype中自定义一个loading图。

我们知道，当一个HMTL5文件在浏览器中预览的时候，如果没有loading的指示器，那么界面会留空一段时间。文件小还好，文件大了那问题就来了。不知情的用户则会认为界面是不是不能访问呀？或则界面出现了什么错误导致不能加载成功呀？从而造成不好的用户体验。那么Hype作为一款可以制作web页面的软件，它本身是有自带的加载指示器的，我们可以在文档检查器中，勾选“显示正在加载指示器”来将他开启。

1.我们来验证一下。打开Hype，这里我提前导入了一张较大的图片。这文稿检查器的选项栏目下，我们可以看到有这么一栏“显示正在加载指示器”，这就是我们之前说的可以开启hype内置的loading图选项。这里我们先不勾选，来预览一下。在chrome中预览时我们发现，页面留空了将近半秒钟才显示了加载的内容页面。

2.当我们勾选了“显示正在加载指示器”后，再来预览一下。我们发现在页面中多了一个显示loading的图。这就是hype内置的加载loading指示器。很多用户看到后会觉得他不美观。重点来了，那么我们怎么自定义这张图呢？我们能替换成我们需要加载的loading效果吗？其实很简单，说白了就是替换自带的loading指示器图。

3.首先，为了确保我们使用的loading图能够显示：

一.在文稿检查器中不勾选"显示正在加载指示器"

二.不勾选绘制场景背景

三.导出为HTML5文件的时候，确保你已经勾选了“创建上层文件夹”选项（示意图如下所示）

4.我们将文件命名为test，保存至桌面。

5.打开test文件，通过编辑器打开test.html文件，在编辑器中找到上图选中的这一段代码。到时候我们的图片的代码就是插在这中间的。

6.将如下这段代码复制到上图所示的位置

<!-- inserted loader code: -->

<div style="position:absolute;height:400px;top:0;left:0px;"> <img src="image.jpg"> <h3 style="color:gray;">Loading...</h3> </div>

<!-- end inserted loader code -->

我先解释下这段代码表达的意思，带惊叹号的我们可以不管，仅仅是用于注释。我们现看这段：<div >  它主要的作用就是用于定义loading图的位置 。<img src="image.jpg">这一段就是我们需要替换的loading图，我们可以将其替换成我们所需的图片名称和格式，而下方的<h3 >Loading...</h3>这段则是loading图下面所显示的文字字样，style中表示了字体的颜色。这些值都是可以修改的。如果你对代码一窍不通，那么请跟着我一步步来。

7.我从网上下载了一张GIF loading图（xh.gif），我们就用他来替换hype自带的loading指示器。首先我们需要复制这张gif图的名称（记得将.gif格式一起复制哦）。打开我们之前的编辑器，将image.jpg 用我们准备的gif图名称代替。打开test文件夹，双击test.html，在浏览器中预览一下，我们发现加载时，有一张裂图出现在了网页中，loading字样则显示在其下方，说明代码还是起作用了。出现的裂图是因为我们没有将gif资源文件放在test文件夹下。

8.我们将资源文件拖入到test文件夹中，我们再来访问一下test.html。这是我们惊喜的发现，loading图已经显示在了网页中。但是对于显示的位置我们不是很满意。那么我们就需要修改之前代表位置的那段代码了。

9.也就是这一段：<div >  。这里我们用百分比来设置loading图在屏幕中显示的位置，设置position:absolute;（绝对定位）无论加载的文件内容位置怎么变，都不会影响loading图的位置。top和left设置的百分比表示距离顶部和左边的距离。设置百分比的好处是：不论你屏幕的尺寸有多不一样，他相对屏幕的位置是不会变的。当然这个距离你可以自行调整，你可以使你的loading图在屏幕的任何位置。为了让页面简洁这里我将loading的字样删除了，当然如果你需要的话你可以保留，还可以在style中更改成你想要的样式。好的，替换完之后，我们通过chrome中的设备模式来预览一下效果吧。这时我们惊奇的发现，loading图已经显示在了屏幕的中间（有偏差可以自行调整）。

web预览效果可能不是那么明显，我们通过手机来预览一下吧。

10.上传到服务器后，通过访问链接生成的二维码，我们用微信扫一扫在微信浏览器中预览一下效果。这里我们可以看到，加载的效果还是很明显的。刷新一下界面，我们可以发现加载效果还是存在的。这样我们就可以将原先的loading图替换成无论是网上找的还是自己做的，都没问题。小伙伴们是不是已经按耐不住了呢？想自己动手试一下了吧。已附上本次教程的资源文件。

链接: http://pan.baidu.com/s/1kTCSeJP     密码: vxf7    

更多教程请关注hype中国社区：hypechina.com