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 相关文章推荐
整理一些JavaScript的IE和火狐的兼容性注意事项
Mar 17 Javascript
一款jquery特效编写的大度宽屏焦点图切换特效的实例代码
Aug 05 Javascript
FireBug 调试JS入门教程 如何调试JS
Dec 23 Javascript
javascript表单验证和Window详解
Dec 11 Javascript
js仿土豆网带缩略图的焦点图片切换效果实现方法
Feb 23 Javascript
jquery实现滑屏大图定时收缩为小banner图片的广告代码
Sep 02 Javascript
JS实现的鼠标跟随代码(卡通手型点击效果)
Oct 26 Javascript
JS中的hasOwnProperty()和isPrototypeOf()属性实例详解
Aug 11 Javascript
JS去掉字符串前后空格或去掉所有空格的用法
Mar 25 Javascript
微信小程序 图片上传实例详解
May 05 Javascript
新手快速入门微信小程序组件库 iView Weapp
Jun 24 Javascript
前端框架ECharts dataset对数据可视化的高级管理
Dec 24 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
Oracle Faq(Oracle的版本)
2006/10/09 PHP
第四节--构造函数和析构函数
2006/11/16 PHP
php递归使用示例(php递归函数)
2014/02/14 PHP
简单实用的PHP防注入类实例
2014/12/05 PHP
PHP批量删除jQuery操作
2017/07/23 PHP
JavaScript高级程序设计(第3版)学习笔记9 js函数(下)
2012/10/11 Javascript
JS将表单导出成EXCEL的实例代码
2013/11/11 Javascript
jquery实现不包含当前项的选择器实例
2015/06/25 Javascript
JS实现添加,替换,删除节点元素的方法
2016/06/30 Javascript
javascript汉字拼音互转的简单实例
2016/10/09 Javascript
JavaScript 值类型和引用类型的初次研究(推荐)
2017/07/19 Javascript
基于vue实现移动端圆形旋钮插件效果
2018/11/28 Javascript
NodeJS 文件夹拷贝以及删除功能
2019/09/03 NodeJs
基于vue 动态菜单 刷新空白问题的解决
2020/08/06 Javascript
[26:52]LGD vs EG 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
Python实现基于HTTP文件传输实例
2014/11/08 Python
Python实现获取照片拍摄日期并重命名的方法
2017/09/30 Python
Python 查找字符在字符串中的位置实例
2018/05/02 Python
图文详解python安装Scrapy框架步骤
2019/05/20 Python
python读写配置文件操作示例
2019/07/03 Python
django drf框架中的user验证以及JWT拓展的介绍
2019/08/12 Python
python中的线程threading.Thread()使用详解
2019/12/17 Python
纯CSS3实现给头像加个光芒四射且旋转的背景动画效果
2014/05/07 HTML / CSS
总结30个CSS3选择器
2017/04/13 HTML / CSS
世界上最大的糖果店:Dylan’s Candy Bar
2017/11/07 全球购物
生日派对邀请函
2014/01/13 职场文书
应届护士求职信范文
2014/01/26 职场文书
小学生安全保证书
2014/02/01 职场文书
一夜的工作教学反思
2014/02/08 职场文书
大学生求职信例文
2014/06/29 职场文书
班组拓展活动方案
2014/08/14 职场文书
乡镇群众路线专项整治方案
2014/11/03 职场文书
2014年网络管理员工作总结
2014/12/01 职场文书
党支部审查意见
2015/06/02 职场文书
赵氏孤儿观后感
2015/06/09 职场文书
学习社交礼仪心得体会
2016/01/22 职场文书