一、js代码：
//获取浏览器页面可见高度和宽度
var?_pageheight?=?document.documentelement.clientheight,
_pagewidth?=?document.documentelement.clientwidth;
//计算loading框距离顶部和左部的距离（loading框的宽度为215px，高度为61px）
var?_loadingtop?=?_pageheight?>?61(_pageheight?–?61)?/?2?:?0,
_loadingleft?=?_pagewidth?>?215(_pagewidth?–?215)?/?2?:?0;
//在页面未加载完毕之前显示的loading?html自定义内容
var?_loadinghtml?=?‘<div?id=”loadingdiv”?style=”position:absolute;left:0;width:100%;height:’?+?_pageheight?+?‘px;top:0;background:#f3f8ff;opacity:0.8;filter:alpha(opacity=80);z-index:10000;”><div?style=”position:?absolute;?cursor1:?wait;?left:?‘?+?_loadingleft?+?‘px;?top:’?+?_loadingtop?+?‘px;?width:?auto;?height:?57px;?line-height:?57px;?padding-left:?50px;?padding-right:?5px;?background:?#fff?url(/content/loading.gif)?no-repeat?scroll?5px?10px;?border:?2px?solid?#95b8e7;?color:?#696969;?font-family:\’microsoft?yahei\’;”>页面加载中，请等待…</div></div>’;
//呈现loading效果
document.write(_loadinghtml);
//window.onload?=?function?()?{
//var?loadingmask?=?document.getelementbyid(‘loadingdiv’);
//loadingmask.parentnode.removechild(loadingmask);
//};
//监听加载状态改变
document.onreadystatechange?=?completeloading;
//加载状态为complete时移除loading效果
function?completeloading()?{
if?(document.readystate?==?“complete”)?{
var?loadingmask?=?document.getelementbyid(‘loadingdiv’);
loadingmask.parentnode.removechild(loadingmask);
}
}
二、效果：
说明：
将此段js代码放入<head>最后即可；
其中loading效果的样式可以根据自己的风格修改，loading.gif这个图片需要自己找（网上很多的）。
demo下载地址：
http://download.csdn.net/detail/qubernet/7478225