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
Nov 25 Javascript
jQuery判断checkbox(复选框)是否被选中以及全选、反选实现代码
Feb 21 Javascript
JavaScript函数的4种调用方法详解
Apr 22 Javascript
jquery缓动swing liner控制动画过程不同时刻的速度
May 29 Javascript
javascript表格隔行变色加鼠标移入移出及点击效果的方法
Apr 10 Javascript
jquery.cookie实现的客户端购物车操作实例
Dec 24 Javascript
全面解析Bootstrap表单样式的使用
Sep 09 Javascript
jstree单选功能的实现方法
Jun 07 Javascript
JavaScript 五大常见函数
Mar 23 Javascript
JS中双击和单击事件冲突的解决方法
Apr 09 Javascript
node中的cookie的具体使用
Sep 13 Javascript
VSCode搭建Vue项目的方法
Apr 30 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数据库操作面向对象的优点
2006/10/09 PHP
yii2使用GridView实现数据全选及批量删除按钮示例
2017/03/01 PHP
JS实现可关闭的对联广告效果代码
2015/09/14 Javascript
js调出上下文菜单的实例
2015/12/17 Javascript
JavaScript的函数式编程基础指南
2016/03/19 Javascript
DIV随滚动条滚动而滚动的实现代码【推荐】
2016/04/12 Javascript
vue分页组件table-pagebar使用实例解析
2020/11/15 Javascript
详解如何在NodeJS项目中优雅的使用ES6
2017/04/22 NodeJs
浅谈vue+webpack项目调试方法步骤
2017/09/11 Javascript
使用live-server快速搭建本地服务器+自动刷新的方法
2018/03/09 Javascript
vue的keep-alive中使用EventBus的方法
2019/04/23 Javascript
小程序组件之自定义顶部导航实例
2019/06/12 Javascript
js事件触发操作实例分析
2019/06/21 Javascript
Paypal支付不完全指北
2020/06/04 Javascript
vue+axios 拦截器实现统一token的案例
2020/09/11 Javascript
[02:05]2014DOTA2西雅图国际邀请赛 BBC第二天小组赛总结
2014/07/11 DOTA
Python实现简单字典树的方法
2016/04/29 Python
python win32 简单操作方法
2017/05/25 Python
django文档学习之applications使用详解
2018/01/29 Python
Python3连接SQLServer、Oracle、MySql的方法
2018/06/28 Python
python最小生成树kruskal与prim算法详解
2019/01/17 Python
在python下使用tensorflow判断是否存在文件夹的实例
2019/06/10 Python
Python定时任务APScheduler的实例实例详解
2019/07/22 Python
python3 sleep 延时秒 毫秒实例
2020/05/04 Python
python对输出的奇数偶数排序实例代码
2020/12/04 Python
利用canvas实现图片下载功能来实现浏览器兼容问题
2019/05/31 HTML / CSS
Whittard官方海外旗舰店:英国百年茶叶品牌
2018/02/22 全球购物
微软美国官方网站:Microsoft美国
2018/05/10 全球购物
可靠的数据流传输TCP
2016/03/15 面试题
C#如何进行LDAP用户校验
2012/11/21 面试题
毕业生找工作推荐信
2013/11/21 职场文书
幼儿园2014年度工作总结
2014/11/10 职场文书
先进党组织事迹材料
2014/12/26 职场文书
PyCharm 安装与使用配置教程(windows,mac通用)
2021/05/12 Python
Python NumPy灰度图像的压缩原理讲解
2021/08/04 Python
TypeScript 使用 Tuple Union 声明函数重载
2022/04/07 Javascript