jquery实现页面加载效果

1、说明

Jquery页面加载可实现异步请求时提示"请稍后，正在加载."效果，同步请求不可用（即ajax async: false)。

2、代码

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' head meta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8'/titlejquery页面加载特效/title style type=' text/CSS ' * { margin : 0；padd : 0；列表样式类型：无；} a、img { border : 0；} .正在加载{ margin: 100px auto 0 auto宽度： 400像素；文本对齐：中心；font-size : 18px} .装货。操作{ text-摆设：无；字体系列： '微软雅黑' , '宋体；} .盖子{位置：固定；top : 0；右： 0；底部： 0；左： 0；z指数： 998；宽度： 100%;高度： 100%;_ padd : 0 20px 0 0 background : # f6f 4 F5；显示器：无；} .显示加载{位置：固定；top : 0；左侧： 50%;z指数： 9999；opa城市3360 0；filter: alpha(不透明度=0);左边距：-80px；} *html，*html正文{背景-图像： url(约：空白)；背景-附件：固定；} *html .showLoad，*html .盖{位置：绝对值；top:表达式(评估(文档。文档元素。滚动顶部))；} # AJaxload {边框： 1px实心# 8CBEDAfont-size : 12px字体粗细：粗体；} # AJaxload div。LoadAll { width : 180 px高度： 50px线高： 50pxborder: 2px固体# D6E7F2背景# fff } # AJaxload img { margin : 10px 15px；向左浮动：display: inline}/style脚本类型=' text/JavaScript ' src=' http : js/jquery。量滴js '/script script type=' text/JavaScript ' $(function(){ var hei=$(document)).高度();$('.封面')。CSS({ ' hei ' : hei })；$('.动作')。单击(function(){ startWaiting()；setTimeout()函数(){ endWaiting()；}, 3000);});});//开始加载函数startWaiting() { $(').封面')。css({ 'display': 'block '，' opacity ' : ' 0.8 ' })；$('.显示负载').停止（真)。动画({ 'margin-top': '300px '，' opacity': '1' }，200)；} //结束加载函数endWaiting() { $(').显示负载').停止（真)。动画({ 'margin-top': '250px '，' opacity': '0' }，400)；$('.封面')。css({ 'display': 'none '，' opacity ' : ' 0 ' })；}/script/head body div class=' loading ' a class=' action ' href=' JavaScript : void(0)；rel='外部' nofollow '点击加载特效/a/div class=' cover '/div div id=' AJaxlLoad ' class=' ShowLoad ' div class=' LoadAll ' img src=' http 3360 image/waiting。gif '加载中，请稍候./div/div/body/html(9500 . 163.com)

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！