实现载入动画 如何让载入动画覆盖整个页面？ 实现标签对页面的全覆盖 页面掩盖 —— 博客园 载入动画设置

以本博客的蜂鸟载入动画为例：

前提是已经找到心仪的动画脚本和样式文件！如果没有的话建议上 jQuery插件库（点击即可转到） 寻找

主要思路：

0、将加载动画放在页首HTML代码块中最上方，使得其加载后在其他主要内容上方。

1、把wide和height设为100%，使得进入页面后能够看到的都是加载动画。

2、禁止页面滚动。

3、使用jquery配合setTimeOut方法实现对主页其他内容的hide。

4、加载动画fadeOut

5、恢复页面滚动和其他主要内容

控制用js代码：

<script type="text/javascript">
$(document).ready(function(){
    $(".wrapper").fadeOut(2300);//.wrapper是页面载入动画的容器
    $("html").scrollTop(1);//设置使得初始值一定在最上方
    document.documentElement.style.overflow='hidden';
    setTimeout(function(){document.documentElement.style.overflow='';}, 2000);//设置加载过程中页面不允许页面滚动，2000ms后解除，允许页面活动
$("#home").hide();//隐藏主要内容，但主要不能包括wrapper容器
 setTimeout(function(){$("#home").fadeIn("1000");}, 2000);
});//使用jQuery恢复原内容
</script>

这里使用jQuery的delay()方法是没有用的，原因未查明还望指点，初步估计和其他脚本文件的异步控制冲突（我的#home是由很多脚本控制的）。