JS+CSS实现网页加载中的动画效果


Posted in Javascript onOctober 27, 2017

本文实例为大家分享了JS实现网页加载中效果的具体代码,供大家参考,具体内容如下

需要材料:

一张loading动画的gif图片

基本逻辑:

模态框遮罩 + loading.gif动图,
默认隐藏模态框
页面开始发送Ajax请求数据时,显示模态框
请求完成,隐藏模态框

下面我们通过Django新建一个web应用,来简单实践下

实践

1.新建一个Django项目,创建应用app01, 配置好路由和static,略。将gif动图放到静态文件夹下,结构如下:

JS+CSS实现网页加载中的动画效果

2.视图中定义一个函数,它返回页面test.html:

def test(request):
 return render(request, 'test.html')

3.test.html页面如下:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <!-- 导入css样式 -->
 <link rel="stylesheet" href="/static/css/loading.css" rel="external nofollow" >
 <!-- 导入jquery 和 js文件 -->
 <script src="/static/plugins/jquery-3.2.1.js"></script>
 <script src="/static/js/loading.js"></script>
</head>
<body>

<h1>你好啊,朋友!</h1>
<hr>

<div id="content">
 <p>正在请求服务器数据....</p>
</div>

<!-- 模态框部分 -->
<div class="loading hide">
 <div class="gif"></div>
</div>

</body>
</html>

4.CSS样式如下:

/* 模态框样式 */
.loading {
 position: fixed;
 top: 0;
 bottom: 0;
 right: 0;
 left: 0;
 background-color: black;
 opacity: 0.4;
 z-index: 1000;
}

/* 动图样式 */
.loading .gif {
 height: 32px;
 width: 32px;
 background: url('/static/img/loading.gif');
 position: fixed;
 left: 50%;
 top: 50%;
 margin-left: -16px;
 margin-top: -16px;
 z-index: 1001;
}

说明:

  • 通过设置position: fixed,并令上下左右为0,实现模态框覆盖整个页面;
  • 设置gif动态图为背景,居中,来显示加载效果;
  • 通过设置z-index值,令gif图悬浮在模态框上面;
  • background-color: black;是为了看着明显,具体使用时可以设为white;

5.JS文件如下:

$(function () {
 //准备请求数据,显示模态框
 $('div.loading').show();

 $.ajax({
  url: "/ajax_handler.html/",
  type: 'GET',
  data: {},
  success: function (response) {
   var content = response.content;
   $('#content').html(content);

   //请求完成,隐藏模态框
   $('div.loading').hide();
  },
  error: function () {
   $('#content').html('server error...');

   //请求完成,隐藏模态框
   $('div.loading').hide();
  }
 })
});

说明:

页面载入后,开始发送Ajax请求,从服务端ajax_handler视图请求数据,这时显示模态框
请求完成后,不论成功与否,隐藏模态框

6.ajax_handler视图如下,它模拟网络延迟,并返回一些字符串:

from django.http import JsonResponse
from django.utils.safestring import mark_safe # 取消字符串转义

def ajax_handler(request):
 # 模拟网络延迟
 import time
 time.sleep(3)

 msg = ''' XXX ''' # 这里你可以随便放入一些字符串

 return JsonResponse({"content": mark_safe(msg)})

效果如下:

JS+CSS实现网页加载中的动画效果

JS+CSS实现网页加载中的动画效果

如果显示不了gif动图,可能是浏览器缓存问题。项目完整代码在这里:https://github.com/Ayhan-Huang/Loading

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
又一个小巧的图片预加载类
May 05 Javascript
在javaScript中关于submit和button的区别介绍
Oct 20 Javascript
JavaScript数据库TaffyDB用法实例分析
Jul 27 Javascript
jquery衣服颜色选取插件效果代码分享
Aug 28 Javascript
jQuery添加和删除指定标签的方法
Dec 16 Javascript
实例讲解js验证表单项是否为空的方法
Jan 09 Javascript
纯JS代码实现一键分享功能
Apr 20 Javascript
JS中对Cookie的操作详解
Aug 05 Javascript
微信小程序支付前端源码
Aug 29 Javascript
如何在Vue.js中实现标签页组件详解
Jan 02 Javascript
Vue CLI2升级至Vue CLI3的方法步骤
May 20 Javascript
Vue开发环境跨域访问问题
Jan 22 Javascript
vue-resource拦截器设置头信息的实例
Oct 27 #Javascript
Vue-resource拦截器判断token失效跳转的实例
Oct 27 #Javascript
vue2里面ref的具体使用方法
Oct 27 #Javascript
初学者AngularJS的环境搭建过程
Oct 27 #Javascript
JavaScript中Require调用js的实例分享
Oct 27 #Javascript
JavaScript自执行函数和jQuery扩展方法详解
Oct 27 #jQuery
Popup弹出框添加数据实现方法
Oct 27 #Javascript
You might like
php之可变变量的实例详解
2017/09/12 PHP
Laravel5.5以下版本中如何自定义日志行为详解
2018/08/01 PHP
javascript设计模式 封装和信息隐藏(上)
2012/07/24 Javascript
解决火狐浏览器下JS setTimeout函数不兼容失效不执行的方法
2012/11/14 Javascript
javasciprt下jquery函数$.post执行无响应的解决方法
2014/03/13 Javascript
jQuery对指定元素中指定字符串进行替换的方法
2015/03/17 Javascript
JavaScript中字符串分割函数split用法实例
2015/04/07 Javascript
jQuery实现鼠标双击Table单元格变成文本框及输入内容后更新到数据库的方法
2015/11/25 Javascript
javascript工厂模式和构造函数模式创建对象方法解析
2016/12/30 Javascript
element-ui 表格数据时间格式化的方法
2018/08/24 Javascript
玩转vue的slot内容分发
2018/09/22 Javascript
详解小程序用户登录状态检查与更新实例
2019/05/15 Javascript
解决layui弹出层layer的area过大被遮挡的问题
2019/09/21 Javascript
jsonp格式前端发送和后台接受写法的代码详解
2019/11/07 Javascript
[09:31]2016国际邀请赛中国区预选赛Yao赛后采访 答题送礼
2016/06/27 DOTA
python中安装模块包版本冲突问题的解决
2017/05/02 Python
Python 模拟员工信息数据库操作的实例
2017/10/23 Python
Flask框架模板渲染操作简单示例
2019/07/31 Python
利用pandas合并多个excel的方法示例
2019/10/10 Python
python pip安装包出现:Failed building wheel for xxx错误的解决
2019/12/25 Python
django执行原始查询sql,并返回Dict字典例子
2020/04/01 Python
Python改变对象的字符串显示的方法
2020/08/01 Python
Django celery异步任务实现代码示例
2020/11/26 Python
python3代码输出嵌套式对象实例详解
2020/12/03 Python
澳大利亚领先的睡衣品牌:Peter Alexander
2016/08/16 全球购物
Luxplus瑞典:香水和美容护理折扣
2018/01/28 全球购物
SHEIN香港:价格实惠的女性时尚服装
2018/08/14 全球购物
斯巴达比赛商店:Spartan Race
2019/01/08 全球购物
PHP如何去执行一个SQL语句
2016/03/05 面试题
医药工作者的求职信范文
2013/09/21 职场文书
公务员总结性个人自我评价
2013/12/05 职场文书
个人素质的自我评价分享
2013/12/16 职场文书
综合内勤岗位职责
2014/04/14 职场文书
好书伴我成长演讲稿
2014/05/14 职场文书
一次SQL查询优化原理分析(900W+数据从17s到300ms)
2022/06/10 SQL Server
SpringBoot深入分析讲解监听器模式下
2022/07/15 Java/Android