design的前端开发博客

以前在看阿瓦的blog的时候，发现左上角有个网页加载进度条，刚开始感觉很奇怪，flash制作加载进度条是比较容易的事情，但网页里面东西太多了，怎么能知道加载了多少了呢？

现在一般把网页分成三个部分：结构(HTML)、行为(Script)和表现(CSS)。要判断一个网页是否加载完毕，这三个部分都不可少。以一个常规的HTML页面进行分析，页面首先需要有一段标准的HTML结构，然后是头部引用了一段CSS，底部引用一段Script；然后网页里还会有些多媒体信息(图片、flash动画、视频等)，其中最占用网页加载时间应该是这些多媒体信息，对于图片必须完全加载才能显示，而flash和视频目前都在使用流媒体技术，无需完全加载就可以显示出来，所以对于flash和视频，只需要判断其播放器是否已经加载就可以了，剩余的流媒体数据，让播放器自己加载。

对于前端开发人员肯定都很熟悉$(document).ready()，使用DOM Ready可以判断网页DOM结构是否已经就绪，此时即使图片没有加载，也不影响网页渲染和动作脚本执行，这时候已经认定网页加载成功了。

但这个DOM Ready肯定不能用作模拟加载进度条，因为DOM Ready的时候，可能很多图片还在加载中，用户并没有感觉到网页已经加载完毕了。如果要说网页加载完毕了，图片、flash、视频等数据肯定能够不可少。在上一篇博文《JavaScript预加载图片与浏览器文件缓存》中，知道可以使用JavaScript来预加载图片，如果DOM Ready的时候，我们遍历网页里面的图片文件、样式表文件和脚本文件，然后把文件地址添加到预加载文件列表里，就可以使用JavaScript判断文件加载的进度了。

另外网页里还会有Flash和视频，对于这两者，因为是流媒体，如果使用JavaScript来判断它们是否已经完全加载，实际操作中会有诸多的不便，比如需要JavaScript和它们进行通信，带来了开发上的麻烦，也造成进度条脚本的通用性变差。其实从目前来看，网络视频基本都已经使用Flash播放器了，使用传统视频播放器的很少。对于Flash视频，只要播放器加载完毕，就可以认为网页已经完全就绪了，至于剩下的视频内容，可以让播放器慢慢加载(比如优酷，土豆等)。所以对于网页里的Flash交互动画和Flash视频，只要主文件或播放器已经加载，就可以假定其已经加载就绪。或者更进一步，只要其HTML代码已经载入，就可以认为其已经加载。

这样简单分析之后，制作网页加载进度条的思路就有了，我们只需要使用JavaScript来检测四个部分的内容就可以了，页面本身HTML代码、页面的CSS、页面的脚本文件、页面里的所有图片文件。打开一个网页，浏览器首先载入的肯定是页面本身的HTML代码，在DOM Ready的时候，开始执行预加载，检测网页里CSS、JS和图片的加载进度，这样进度条就出来了。当所有CSS、JS和图片文件加载完成，就可以估算认为网页已经加载结束了。

如果网页里没有插入视频和Flash，这种利用JavaScript预加载模拟的进度条和真实的加载进度很接近，会给用户很逼真的感觉。当然如果想做的更完善一点，可以把Flash和Iframe的真实加载程度也考虑进去，这样就可以做出真的加载进度条了。