首页 > 特效插件 > 窗口特效 >  页面加载完之前显示加载动画的效果,js页面加载动画教程正文

页面加载完之前显示加载动画的效果,js页面加载动画教程

特效介绍
页面加载jquery特效
页面加载jquery特效

      一般网页如果图片过大，数据量过多，或者网页动画执行之前加载时显示的空白等等，就需要一个在页面加载完成之前显示的提示，比如“页面加载中”等。本页面加载动画，实现的就是这个效果，在页面完全载入之前，会显示一个加载动画，提示用户正在加载。当加载完成，加载动画消失。您可以点击文件末尾的查看按钮，查看效果。请耐心等待，因为为了获得足够的加载动画时间，插件中使用的图片非常的大。等图片加载完毕，页面完整显示出来，加载动画和黑色的遮罩会自动消失。
      本插件的原理是：通过js的onload(这里是jquery的load，道理一样)，控制加载动画的显示，当完全onload，再去除动画。由于比较简单，就几行代码，所以，不提供下载，您可以按照下面的使用方法，将本效果使用到您的项目中去。
使用方法
1、在项目的head中，加入下面的代码： 
<script src="https://5.jimth.com/download/jquery/jquery-1.8.3.min.js"></script>
<script>
$(window).load(
	function(){$('.page_shade').fadeOut(500);
	$("body").css({'overflow':"visible"});}
)
</script>
<style>
*{margin:0px; padding:0px;}
.page_shade{
	background: #000 url("page_shade.gif") no-repeat scroll 50% 50%;
	background-size: 40%;
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 999999999;
    text-align: center;
    color: #fff;
    font-size:12px;
    display:table;
}
.page_shade .subwrap{display:table-cell; vertical-align:middle;}
</style>
注意：您可以将css放到您的css文件，js代码放到您的js文件中。加载动画的gif图片，您可以自己下载，也可以从网上找更好看的，建议不超过50KB，否则，页面都加载完了，加载动画还没出来。

2、在body中加入下面的代码，建议放在所有html的最上面，让它最先执行： 
<div class="page_shade">
	<div class="subwrap">页面加载中...</div>
</div>
TAGS: 页面  加载  完  之前  显示  动  画的  效果  页面