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为数字添加逗号并格式化数字的代码
Aug 23 Javascript
对于Form表单reset方法的新认识
Mar 05 Javascript
jquery form 隐藏的input 选择
Apr 29 Javascript
JavaScript变量的作用域全解析
Aug 14 Javascript
详解JS几种变量交换方式以及性能分析对比
Nov 25 Javascript
jquery+html仿翻页相册功能
Dec 20 Javascript
js Canvas绘制圆形时钟教程
Feb 06 Javascript
一篇文章让你彻底弄懂JS的事件冒泡和事件捕获
Aug 14 Javascript
Vue 指令实现按钮级别权限管理功能
Apr 23 Javascript
写给新手同学的vuex快速上手指北小结
Apr 14 Javascript
springboot+vue+对接支付宝接口+二维码扫描支付功能(沙箱环境)
Oct 15 Javascript
在react项目中使用antd的form组件,动态设置input框的值
Oct 24 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 获取当前访问的url文件名的方法小结
2010/02/08 PHP
用穿越火线快速入门php面向对象
2012/02/22 PHP
php二维数组排序方法(array_multisort usort)
2013/12/25 PHP
PHP header()函数常用方法总结
2014/04/11 PHP
Yii框架连接mongodb数据库的代码
2016/07/27 PHP
JS实现程序暂停与继续功能代码解读
2013/10/10 Javascript
jQuery中focus事件用法实例
2014/12/26 Javascript
jQuery选择器源码解读(三):tokenize方法
2015/03/31 Javascript
JavaScript实现简单图片翻转的方法
2015/04/17 Javascript
javascript中的previousSibling和nextSibling的正确用法
2015/09/16 Javascript
利用Angularjs和bootstrap实现购物车功能
2016/08/31 Javascript
jQuery EasyUI右键菜单实现关闭标签/选项卡
2016/10/10 Javascript
Bootstrap模态框水平垂直居中与增加拖拽功能
2016/11/09 Javascript
JavaScript中无法通过div.style.left获取值的解决方法
2017/02/19 Javascript
ES6 Promise对象概念与用法分析
2017/04/01 Javascript
vue的状态管理模式vuex
2017/11/30 Javascript
js实现一个简单的MVVM框架示例
2018/01/15 Javascript
浅谈实现vue2.0响应式的基本思路
2018/02/13 Javascript
JS实现调用本地摄像头功能示例
2018/05/18 Javascript
解决Echarts 显示隐藏后宽度高度变小的问题
2020/07/19 Javascript
[03:51]吞吞映像 每周精彩击杀top10第二弹
2014/06/25 DOTA
Python编程实现的图片识别功能示例
2017/08/03 Python
Python实现E-Mail收集插件实例教程
2019/02/06 Python
python实现统计文本中单词出现的频率详解
2019/05/20 Python
python如何使用代码运行助手
2020/07/03 Python
Python requests及aiohttp速度对比代码实例
2020/07/16 Python
python 多进程和协程配合使用写入数据
2020/10/30 Python
使用Filters滤镜弥补CSS3的跨浏览器问题以及兼容低版本IE
2013/01/23 HTML / CSS
CSS3中新增的对文本和字体的设置
2020/02/03 HTML / CSS
HTML5本地存储之Database Storage应用介绍
2013/01/06 HTML / CSS
canvas因为图片资源不在同一域名下而导致的跨域污染画布的解决办法
2019/01/18 HTML / CSS
Qoo10台湾站:亚洲领先的在线市场
2018/05/15 全球购物
高中生第一学年自我鉴定
2014/09/12 职场文书
酒店财务部岗位职责
2015/04/14 职场文书
超市店长竞聘书
2015/09/15 职场文书
创业计划书之蛋糕店
2019/08/29 职场文书