以本博客的蜂鸟载入动画为例:
前提是已经找到心仪的动画脚本和样式文件!如果没有的话建议上 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是由很多脚本控制的)。