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 相关文章推荐
一个JS小玩意 几个属性相加不能超过一个特定值.
Sep 29 Javascript
jQuery html() in Firefox (uses .innerHTML) ignores DOM changes
Mar 05 Javascript
javascript实现树形菜单的方法
Jul 17 Javascript
json实现添加、遍历与删除属性的方法
Jun 17 Javascript
JavaScript实现图片轮播组件代码示例
Nov 22 Javascript
canvas 绘制圆形时钟
Feb 22 Javascript
一个简易的js图片轮播效果
Jul 22 Javascript
Bootstrap图片轮播效果详解
Oct 17 Javascript
微信小程序block的使用教程
Apr 01 Javascript
vue + typescript + 极验登录验证的实现方法
Jun 27 Javascript
JS实现骰子3D旋转效果
Oct 24 Javascript
JavaScript组合模式---引入案例分析
May 23 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 批量添加多行文本框textarea一行一个
2014/06/03 PHP
彻底删除thinkphp3.1案例blog标签的方法
2014/12/05 PHP
详解PHP防止直接访问.php 文件的实现方法
2017/07/28 PHP
PHP自定义序列化接口Serializable用法分析
2017/12/29 PHP
PHP自定义函数实现assign()数组分配到模板及extract()变量分配到模板功能示例
2018/05/23 PHP
PHP创建XML接口示例
2019/07/04 PHP
深入理解JavaScript作用域和作用域链
2011/10/21 Javascript
JS的Document属性和方法小结
2013/09/17 Javascript
JS滚轮事件onmousewheel使用介绍
2013/11/01 Javascript
jQuery表格插件ParamQuery简单使用方法示例
2013/12/05 Javascript
按下Enter焦点移至下一个控件的实现js代码
2013/12/11 Javascript
JS实现点击文字对应DIV层不停闪动效果的方法
2015/03/02 Javascript
原生javascript实现的一个简单动画效果
2016/03/30 Javascript
详解使用nodeJs安装Vue-cli
2017/05/17 NodeJs
详解Vue Elememt-UI构建管理后台
2018/02/27 Javascript
vue项目实现github在线预览功能
2018/06/20 Javascript
详解React之父子组件传递和其它一些要点
2018/06/25 Javascript
js get和post请求实现代码解析
2020/02/06 Javascript
[01:08]DOTA2“血战之命”预告片
2017/08/12 DOTA
python探索之BaseHTTPServer-实现Web服务器介绍
2017/10/28 Python
让Django支持Sql Server作后端数据库的方法
2018/05/29 Python
python保存数据到本地文件的方法
2018/06/23 Python
django 模型中的计算字段实例
2020/05/19 Python
详解如何将 Canvas 绘制过程转为视频
2021/01/25 HTML / CSS
美国婚礼礼品网站:MyWeddingFavors
2018/09/26 全球购物
教育专业自荐书范文
2013/12/17 职场文书
骨干教师培训制度
2014/01/13 职场文书
机关财务管理制度
2014/01/17 职场文书
音乐教学反思
2014/02/02 职场文书
五年级科学教学反思
2014/02/05 职场文书
计算机毕业生自荐信范文
2014/03/23 职场文书
信息管理专业自荐书
2014/06/05 职场文书
安全宣传标语口号
2014/06/06 职场文书
张丽莉事迹观后感
2015/06/16 职场文书
2016年国陪研修感言
2015/11/18 职场文书
Linux中Nginx的防盗链和优化的实现代码
2021/06/20 Servers