请选择 进入手机版 | 继续访问电脑版
搜索
Hype中国社区 首页 学习 教程 查看内容

Mike手把手系列(五)教你如何在Hype中自定义loading图

2015-11-26 22:31| 发布者: MIke| 查看: 8436| 评论: 3|原作者: Mike

本次教程教大家如何在Hype中自定义一个loading图。通过本次教程相信大家可以制作出精美的loading页面

本次教程教大家如何在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.将如下这段代码复制到上图所示的位置


我先解释下这段代码表达的意思,带惊叹号的我们可以不管,仅仅是用于注释。我们现看这段:

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


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



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


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


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



3

鲜花

握手

雷人

路过

鸡蛋

刚表态过的朋友 (3 人)

发表评论

最新评论

引用 timpro 2016-2-2 22:34
很好,谢谢!
引用 馒头牛牛怪 2016-1-28 10:12
loading时能进一步设置进度的百分比么?
引用 miaomingye 2016-1-11 18:00
很好,谢谢!另外求一个设置微信分享图片和分享语的教程。

查看全部评论(3)

为广大Hype爱好者提供一个学习交流的平台

正在努力制作Hype教程,尽可能为大家带来最新的体验!

Copyright © 2015 Comsenz Inc. Powered by Discuz! X3.1

返回顶部