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 相关文章推荐
Lazy Load 延迟加载图片的 jQuery 插件
Feb 06 Javascript
jquery制作居中遮罩层效果分享
Feb 21 Javascript
js实现二代身份证号码验证详解
Nov 20 Javascript
浅谈JavaScript中的this指针和引用知识
Aug 05 Javascript
js接收并转化Java中的数组对象的方法
Aug 11 Javascript
JavaScript之json_动力节点Java学院整理
Jun 29 Javascript
JavaScript Drum Kit 指南(纯 JS 模拟敲鼓效果)
Jul 23 Javascript
vue.js 中使用(...)运算符报错的解决方法
Aug 09 Javascript
Vue编程式跳转的实例代码详解
Jul 10 Javascript
JavaScript面向对象中接口实现方法详解
Jul 24 Javascript
原理深度解析Vue的响应式更新比React快
Apr 04 Javascript
Vue项目移动端滚动穿透问题的实现
May 19 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
PHP foreach循环使用详解与实例代码
2010/05/08 PHP
php三种实现多线程类似的方法
2015/10/30 PHP
关于PHP文件的自动运行方法分析
2016/05/13 PHP
JS下高效拼装字符串的几种方法比较与测试代码
2010/04/15 Javascript
js自定义事件代码说明
2011/01/31 Javascript
jquery数组封装使用方法分享(jquery数组遍历)
2014/03/25 Javascript
javascript实现左右控制无缝滚动
2014/12/31 Javascript
Jquery插件实现点击获取验证码后60秒内禁止重新获取
2015/03/13 Javascript
jQuery代码实现表格中点击相应行变色功能
2016/05/09 Javascript
jQuery查看选中对象HTML代码的方法
2016/06/17 Javascript
vue的常用组件操作方法应用分析
2018/04/13 Javascript
vue中引用swiper轮播插件的教程详解
2018/08/16 Javascript
小程序实现短信登录倒计时
2019/07/12 Javascript
vue element 生成无线级左侧菜单的实现代码
2019/08/21 Javascript
JS字符串和数组如何实现相互转化
2020/07/02 Javascript
JS代码简洁方式之函数方法详解
2020/07/28 Javascript
vue配置多代理服务接口地址操作
2020/09/08 Javascript
[47:42]Fnatic vs Liquid 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Fiddler如何抓取手机APP数据包
2016/01/22 Python
Python3实现发送QQ邮件功能(文本)
2017/12/15 Python
深入浅析python变量加逗号,的含义
2020/02/22 Python
Django模型中字段属性choice使用说明
2020/03/30 Python
深入分析python 排序
2020/08/24 Python
Python requests HTTP验证登录实现流程
2020/11/05 Python
Jmeter调用Python脚本实现参数互相传递的实现
2021/01/22 Python
迪卡侬印度官网:购买所有体育用品
2017/06/24 全球购物
大学生毕业求职简历的自我评价
2013/10/24 职场文书
大学生期末自我鉴定
2014/02/01 职场文书
群众路线批评与自我批评
2014/02/06 职场文书
职务说明书范文
2014/05/07 职场文书
推荐信怎么写
2014/05/09 职场文书
政治学求职信
2014/06/03 职场文书
大学生档案自我鉴定(2篇)
2014/10/14 职场文书
优秀班组申报材料
2014/12/25 职场文书
普宁寺导游词
2015/02/04 职场文书
python基于OpenCV模板匹配识别图片中的数字
2021/03/31 Python