网站建设（二）通用--页面刚加载时的loading效果

有人问我：有些页面在刚进入的时候，会有loading效果，过一会儿后，loading效果消失，页面展示出来。这个效果如何实现呢？

撇开如何优化加载资源不谈，在页面加载时，不论是有过多的加载资源，还是有一些提前处理逻辑。这一过程可能不希望用户看到，显示一个友好的loading会比较好一点。

当页面处理完毕后，再将loading移除。

要想实现这个效果，首先要明白一个网页从加载（loading效果出现），到完全加载完成（loading效果消失）的整个过程。也就是何时出现，何时消失。

页面的加载流程

1. 下载 index.html

2. 解析 head 标签中的 link 与 script 标签, 如果是带有 src 属性, 阻塞其他逻辑执行, 继续去下载对应的资源并执行. 如果没带, 则直接执行其中的代码逻辑.

3. 渲染 body 标签的内容, 并解析执行 body 中的 script 标签.

4. 全部执行完毕, 执行 DOMContentLoaded 事件绑定的逻辑.

loading出现

所以在第一步结束后，第二步开始时，直接放置一个loading的效果出来。这样对吗？

当然不对的啦，感兴趣的可以试验一下。这时候的body还没有渲染，没办法获得到网页中的任何元素，load效果无法出现。

也就是说需要渲染完页面元素以后，显示loading才是正确的选择。所以引用外部的script，抑或所有的ajax，尽量写到body最后，在加载这些资源前，设置出现loading。

loading消失

在页面全部加载完成后，

window.onload = function(){

// 清除loading效果

}

pace.js 也是一个不错的选择，这个之后会介绍到。

具体网页示例

1. http://demo.wpcom.cn/preview/justnews 这个网站的处理方式是这样的： 1）所有的页面元素全部放在 id=iframe 的 iframe 中（除了loading元素），这样就可以快速的渲染完body，此时，loading元素显示出来。 2）监听 iframe 的onload事件，当 iframe 加载完成时，移除 loading 效果。 附代码（详细代码打开网页自行查看）： loading 开始

loading消失

1. http://themesdesign.in/admiry/red/ui-lightbox.html 这个网页的效果明显没有示例一好，第一次加载页面的时候，有很长时间的空白（你如果打不开，应该能猜到是什么原因）。不过它的实现方法大家可以借鉴一下。 loading出现 该网页的loading出现时由最开始的dom元素控制的，其他元素的样式有一个 overflow: hidden. loading消失 在页面的最后，也就是页面loading完成后，隐藏掉loading元素，并把其他元素的overflow 设置为 visible。 下载源码后可以查看它的 app.js 代码