大型 web app 第一次进去，loading 进度条有方案吗？

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

V2EX 提问指南

这是一个创建于 3837 天前的主题，其中的信息可能已经有所发展或是发生改变。

需要加载大量js,css,mp3音效文件，像flash加载进度是根据文件计算进度的，对于 html5 的 web app有什么方法吗？

求各种 demo 或建议！

进度

音效

计算

10 条回复 • 2014-05-27 19:51:29 +08:00

a591826944

2014-05-27 16:59:40 +08:00

之前有页面加载进度。。是根据请求计算的。。应该可以适用于 web app 吧

akfish

2014-05-27 17:12:20 +08:00

如果静态加载的话，css会远在任何脚本开始运行前就加载完，所以这个不用管。
动态加载css以及js的情况，考虑用RequireJs或者SeaJs之类的模块加载器，异步加载有callback，同步加载行为是确定的。
MP3文件看你用什么库加载，看API文档，一般有event callback。

loading

2014-05-27 17:18:47 +08:00 via Android

@akfish mp3文件我用的audio元素的preload，

我是想让用户知道，我是在加载内容，而不是卡住了，进而我想让他们知道具体进度！

dong3580

2014-05-27 17:26:51 +08:00

@loading
其实你需要这个界面:
http://images.cnitblog.com/i/431064/201404/200039079949949.gif

http://www.cnblogs.com/Wayou/p/gmail_like_page_loading_progress_bar.html

alex321

2014-05-27 17:29:33 +08:00

既然都是 app 了，不管是 hybrid 还是 native，都是在 app 本地啊，这些内容虽说是大量，你能有几兆、十几兆？mp3 除外哈。。。
本地加载零碎文件都比较快的，并且还可以通过保存上一次运行快照的形式加快，或者先渲染页面布局，然后加载内容。

loading

2014-05-27 17:38:59 +08:00 via Android

@alex321 我说了“第一次”，不考虑缓存！

文件不大，网速也快不到哪去！

mp3主要是一些音效和广播，因为声音有实时性要求，所以都要preload，所以必然文件很多很大

就事论事好吗？

loading

2014-05-27 17:40:44 +08:00 via Android

btw：这个不是游戏！只工作上的应用！

akfish

2014-05-27 17:49:16 +08:00

js、css一般较小，按文件算进度就行了，一般一闪而过的事情。

Audio参见：
http://www.w3schools.com/tags/ref_av_dom.asp
http://www.w3schools.com/tags/av_event_progress.asp
http://www.w3schools.com/tags/av_prop_buffered.asp

alex321

2014-05-27 17:50:10 +08:00

@loading 我一直在就事论事啊。比如你需要在 app 中实现由通知 push 或者 pull 过来的时候提醒用户这个场景。
号，我在第一次启动的时候(假设是新安装，静态资源还未加载到内存中或静态资源已经被系统堆栈释放了)，在闪屏的时候后台在加载对应的需要的提醒的通知动画和音频内容到内存中。闪屏时间大约 1.5s，诊断时间在目前手机硬件的 io 上可以做不少事情了，可以做多个类似于这种提醒的场景了。
然后，通知过来了，直接调用内存中的动画和音频资源渲染上去。

loading

2014-05-27 19:51:29 +08:00 via Android

@alex321 嗯，我误会了，抱歉！