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常用表单验证方法总结
May 22 Javascript
点击标签切换和自动切换DIV选项卡
Aug 10 Javascript
javascript框架设计之浏览器的嗅探和特征侦测
Jun 23 Javascript
优化RequireJS项目的相关技巧总结
Jul 01 Javascript
js实时获取窗口大小变化的实例代码
Nov 18 Javascript
jquery仿京东侧边栏导航效果
Mar 02 Javascript
移动端利用H5实现压缩图片上传功能
Mar 29 Javascript
BootStrap的两种模态框方式
May 10 Javascript
浅谈pc端rem字体设置的问题
Aug 03 Javascript
Vue props 单向数据流的实现
Nov 06 Javascript
在vue中把含有html标签转为html渲染页面的实例
Oct 28 Javascript
jQuery实现动态操作table行
Nov 23 jQuery
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
Apache中php.ini的设置方法
2013/02/28 PHP
PHP小教程之实现链表
2014/06/09 PHP
Yii查询生成器(Query Builder)用法实例教程
2014/09/04 PHP
Laravel框架路由和控制器的绑定操作方法
2018/06/12 PHP
JavaScript 动态生成方法的例子
2009/07/22 Javascript
JavaScript中几种常见排序算法小结
2011/02/22 Javascript
更换select下拉菜单背景样式的实现代码
2011/12/20 Javascript
web css实现整站样式互相切换
2013/10/29 Javascript
JavaScript 实现鼠标拖动元素实例代码
2014/02/24 Javascript
一个字符串反转函数可实现字符串倒序
2014/09/15 Javascript
js css 实现遮罩层覆盖其他页面元素附图
2014/09/22 Javascript
微信小程序 使用腾讯地图SDK详解及实现步骤
2017/02/28 Javascript
Angularjs使用过滤器完成排序功能
2017/09/20 Javascript
javascript浏览器用户代理检测脚本实现方法
2017/10/27 Javascript
vue移动端html5页面根据屏幕适配的四种解决方法
2018/10/19 Javascript
微信小程序通过js实现瀑布流布局详解
2019/08/28 Javascript
在微信小程序中使用mqtt服务的方法
2019/12/13 Javascript
RxJS在TypeScript中的简单使用详解
2020/04/13 Javascript
python私有属性和方法实例分析
2015/01/15 Python
Python RuntimeError: thread.__init__() not called解决方法
2015/04/28 Python
python实现图书借阅系统
2019/02/20 Python
django之使用celery-把耗时程序放到celery里面执行的方法
2019/07/12 Python
python3获取url文件大小示例代码
2019/09/18 Python
python解释器pycharm安装及环境变量配置教程图文详解
2020/02/26 Python
CSS3属性 line-clamp控制文本行数的使用
2020/03/19 HTML / CSS
canvas烟花特效锦集
2018/01/17 HTML / CSS
英国著名的化妆品折扣网站:Allbeauty.com
2016/07/21 全球购物
Mytheresa英国官网:拥有160多个奢侈品品牌
2016/10/09 全球购物
爱情寄语大全
2014/04/09 职场文书
校园演讲稿汇总
2014/05/21 职场文书
局领导领导班子四风对照检查材料
2014/09/27 职场文书
2014年党员教师自我剖析材料
2014/09/30 职场文书
2014年酒店年度工作总结
2014/12/10 职场文书
房租涨价通知
2015/04/23 职场文书
pytorch实现线性回归以及多元回归
2021/04/11 Python
解决WINDOWS电脑开机后桌面没有任何图标
2022/04/09 数码科技