javascript 实现load效果

近日,开发一单位小项目,由于需要比较大的查询,造成网页好像假死,用户体验极差.需要进行进度提示,开始考虑用AJAX来实现,因复杂退却了觉得耗用太多精力不值得,考虑用JS脚本还实现,效果还不错.(脚本到网上找的,自己修改了下,时间久了不记得原出处了,请原作者见谅)

function showload(){

var loaddiv;
if(loaddiv=document.getElementById("loaddiv")){
loaddiv.style.display = "block";
}else{
    loaddiv = document.createElement("DIV");
    loaddiv.id="loaddiv";
    loaddiv.style.position = "absolute";
    loaddiv.style.zIndex = 1000;
    loaddiv.style.display="";
    loaddiv.style.left = 0;
    loaddiv.style.top  = 0;
    loaddiv.style.border = "1px solid gray";
    loaddiv.style.background = "#ffffff";
    loaddiv.style.padding = "5";
}
    loaddiv.style.left = document.body.clientWidth/2+"px";
    loaddiv.style.top  = document.body.clientHeight/2+"px" ;
    loaddiv.innerHTML = "<img src='images/loading.gif'><font size='4' color='#FF0000'> <b>Loading ....</b></font>";
    document.body.appendChild(loaddiv);
    document.body.style.cursor="wait";
}




function closeload(){
    var loaddiv=document.getElementById("loaddiv");
    loaddiv.style.display="none";
    document.body.style.cursor="normal";
}


function showloading(){
var loaddiv;
if(loaddiv=document.getElementById("loaddiv")){
loaddiv.style.display = "block";
}else{
    loaddiv = document.createElement("DIV");
    loaddiv.id="loaddiv";
    loaddiv.style.position = "absolute";
    loaddiv.style.zIndex = 1000;
    loaddiv.style.display="";
    loaddiv.style.left = 0;
    loaddiv.style.top  = 0;
    loaddiv.style.border = "1px solid gray";
    loaddiv.style.background = "#ffffff";
    loaddiv.style.padding = "5";
}

var scrollTop=0;
    if(top.document.documentElement && top.document.documentElement.scrollTop){
        scrollTop = top.document.documentElement.scrollTop;
    }else if(document.body){
        scrollTop = top.document.body.scrollTop;
    }
    
    var scrollWid = document.body.scrollWidth/2-50;
    
    //loaddiv.style.left = scrollWid+"px";
    //loaddiv.style.top  = (scrollTop + 5)+"px" ;
    loaddiv.style.left = document.body.clientWidth/2+"px";
    loaddiv.style.top  = document.body.clientHeight/2+"px" ;
    
    loaddiv.innerHTML = "<img src='images/loading.gif'><font size='4' color='#FF0000'> <b>Loading ....</b></font>";
    document.body.style.cursor="wait";     
    
  var sWidth,sHeight;
  sWidth=document.body.scrollWidth;//浏览器工作区域内页面宽度 或使用 screen.width//屏幕的宽度
  sHeight=document.body.scrollHeight;//屏幕高度（垂直分辨率）




  //背景层（大小与窗口有效区域相同，即当弹出对话框时，背景显示为放射状透明灰色）
  var bgObj=document.createElement("div");//创建一个div对象（背景层） //动态创建元素，这里创建的是 div
  //定义div属性，即相当于(相当于，但确不是，必须对对象属性进行定义
  //<div id="bgDiv" style="position:absolute; top:0; background-color:#777; filter:progid:DXImagesTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75); opacity:0.6; left:0; width:918px; height:768px; z-index:10000;"></div>
  bgObj.setAttribute('id','bgDiv');
  bgObj.style.position="absolute";
  bgObj.style.top="0";
  bgObj.style.background="#ffffff";
  bgObj.style.filter="progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75";
  bgObj.style.opacity="0.6";
  bgObj.style.left="0";
  bgObj.style.width=sWidth + "px";
  bgObj.style.height=sHeight + "px";
  bgObj.style.zIndex = "1000";
  document.body.appendChild(bgObj);//在body内添加该div对象
  document.body.appendChild(loaddiv);
}