jquery实现页面加载效果


Posted in Javascript onFebruary 21, 2017

1、说明

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

2、代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>jquery页面加载特效</title>
 <style type="text/css">
 *
 {
  margin: 0;
  padding: 0;
  list-style-type: none;
 }
 a, img
 {
  border: 0;
 }
 .loading
 {
  margin: 100px auto 0 auto;
  width: 400px;
  text-align: center;
  font-size: 18px;
 }
 .loading .action
 {
  text-decoration: none;
  font-family: "微软雅黑" , "宋体";
 }
 .cover
 {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 998;
  width: 100%;
  height: 100%;
  _padding: 0 20px 0 0;
  background: #f6f4f5;
  display: none;
 }
 .showLoad
 {
  position: fixed;
  top: 0;
  left: 50%;
  z-index: 9999;
  opacity: 0;
  filter: alpha(opacity=0);
  margin-left: -80px;
 }
 *html, *html body
 {
  background-image: url(about:blank);
  background-attachment: fixed;
 }
 *html .showLoad, *html .cover
 {
  position: absolute;
  top: expression(eval(document.documentElement.scrollTop));
 }
 #ajaxLoad
 {
  border: 1px solid #8CBEDA;
  font-size: 12px;
  font-weight: bold;
 }
 #ajaxLoad div.loadAll
 {
  width: 180px;
  height: 50px;
  line-height: 50px;
  border: 2px solid #D6E7F2;
  background: #fff;
 }
 #ajaxLoad img
 {
  margin: 10px 15px;
  float: left;
  display: inline;
 }
 </style>
 <script type="text/javascript" src="js/jquery.min.js"></script>
 <script type="text/javascript">
 $(function () {
  var hei = $(document).height();
  $(".cover").css({ "height": hei });
  $(".action").click(function () {
  startWaiting();
  setTimeout(function () {
   endWaiting();
  }, 3000);
  });
 });
 //开始加载
 function startWaiting() {
  $(".cover").css({ 'display': 'block', 'opacity': '0.8' });
  $(".showLoad").stop(true).animate({ 'margin-top': '300px', 'opacity': '1' }, 200);
 }
 //结束加载
 function endWaiting() {
  $(".showLoad").stop(true).animate({ 'margin-top': '250px', 'opacity': '0' }, 400);
  $(".cover").css({ 'display': 'none', 'opacity': '0' });
 }
 </script>
</head>
<body>
 <div class="loading">
 <a class="action" href="javascript:void(0);" rel="external nofollow" >点击加载特效</a></div>
 <div class="cover">
 </div>
 <div id="ajaxLoad" class="showLoad">
 <div class="loadAll">
  <img src="image/waiting.gif">加载中,请稍候...</div>
 </div>
</body>
</html>

jquery实现页面加载效果

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
js限制textarea每行输入字符串长度的代码
Oct 31 Javascript
JS中for循序中延迟加载动态效果的具体实现
Aug 18 Javascript
将查询条件的input、select清空
Jan 14 Javascript
javascript设计模式之中介者模式Mediator
Dec 30 Javascript
使用AngularJS中的SCE来防止XSS攻击的方法
Jun 18 Javascript
js代码实现随机颜色的小方块
Jul 30 Javascript
jQuery插件datatables使用教程
Apr 21 Javascript
手把手教你使用vue-cli脚手架(图文解析)
Nov 08 Javascript
vue-test-utils初使用详解
May 23 Javascript
layui数据表格 table.render 报错的解决方法
Sep 29 Javascript
js实现树形数据转成扁平数据的方法示例
Feb 27 Javascript
简介JavaScript错误处理机制
Aug 04 Javascript
vue2.0使用Sortable.js实现的拖拽功能示例
Feb 21 #Javascript
javascript 实现文本使用省略号替代(超出固定高度的情况)
Feb 21 #Javascript
详解JavaScript 中getElementsByName在IE中的注意事项
Feb 21 #Javascript
使用get方式提交表单在地址栏里面不显示提交信息
Feb 21 #Javascript
JavaScript中的this陷阱的最全收集并整理(没有之一)
Feb 21 #Javascript
从零学习node.js之文件操作(三)
Feb 21 #Javascript
JavaScript实现按键精灵的原理分析
Feb 21 #Javascript
You might like
PhpMyAdmin中无法导入sql文件的解决办法
2010/01/08 PHP
PHP获取youku视频真实flv文件地址的方法
2014/12/23 PHP
php实现往pdf中加数字签名操作示例【附源码下载】
2018/08/07 PHP
在JavaScript中实现命名空间
2006/11/23 Javascript
JavaScript Konami Code 实现代码
2009/07/29 Javascript
JS中confirm,alert,prompt函数使用区别分析
2010/04/01 Javascript
javascript制作loading动画效果 loading效果
2014/01/14 Javascript
JavaScript中for循环的使用详解
2015/06/03 Javascript
javascript事件委托的方式绑定详解
2015/06/10 Javascript
jquery插件splitScren实现页面分屏切换模板特效
2015/06/16 Javascript
javascript 中的事件委托详解
2016/10/25 Javascript
Vue2.5通过json文件读取数据的方法
2018/02/27 Javascript
element-ui 中的table的列隐藏问题解决
2018/08/24 Javascript
layui异步加载table表中某一列数据的例子
2019/09/16 Javascript
Vue微信公众号网页分享的示例代码
2020/05/28 Javascript
[01:55]2014DOTA2国际邀请赛快报:国土生病 紧急去医院治疗
2014/07/10 DOTA
[03:01]2014DOTA2国际邀请赛 小组赛7月13日TOPPLAY
2014/07/14 DOTA
Python实现邮件的批量发送的示例代码
2018/01/23 Python
pandas创建新Dataframe并添加多行的实例
2018/04/08 Python
Python之修改图片像素值的方法
2019/07/03 Python
python读写csv文件并增加行列的实例代码
2019/08/01 Python
PyTorch 普通卷积和空洞卷积实例
2020/01/07 Python
html5 更新图片颜色示例代码
2014/07/29 HTML / CSS
什么是网络协议
2016/04/07 面试题
环境工程与管理大学毕业生求职信
2013/10/02 职场文书
高中体育教学反思
2014/01/29 职场文书
运动会稿件100字
2014/02/21 职场文书
生产部厂长职位说明书
2014/03/03 职场文书
成龙霸王洗发水广告词
2014/03/14 职场文书
父亲节活动总结
2015/02/12 职场文书
简历自我评价模板
2015/03/11 职场文书
2015年挂职干部工作总结
2015/05/14 职场文书
解除处分决定书
2015/06/25 职场文书
大学生创业,为什么都会选择快餐饮?
2019/08/08 职场文书
PHP使用非对称加密算法RSA
2021/04/21 PHP
SpringDataJPA在Entity中常用的注解介绍
2021/12/06 Java/Android