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 相关文章推荐
出现“不能执行已释放的Script代码”错误的原因及解决办法
Aug 29 Javascript
ie 调试javascript的工具
Apr 29 Javascript
IE6下js通过css隐藏select的一个bug
Aug 16 Javascript
Jquery 点击按钮显示和隐藏层的代码
Jul 25 Javascript
详细分析JavaScript函数定义
Jul 16 Javascript
jQuery实现下拉菜单(内容为时间)的实时更新及图表的随动更新的方法
Jul 07 Javascript
vue-router单页面路由
Jun 17 Javascript
react-native ListView下拉刷新上拉加载实现代码
Aug 03 Javascript
vue.js评论发布信息可插入QQ表情功能
Aug 08 Javascript
基于Koa2写个脚手架模拟接口服务的方法
Nov 27 Javascript
在vue中使用G2图表的示例代码
Mar 19 Javascript
vant-ui框架的一个bug(解决切换后onload不触发)
Nov 11 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与MySQL开发中页面乱码的产生与解决
2008/03/27 PHP
PHP中开启gzip压缩的2种方法
2015/01/31 PHP
PHP判断IP并转跳到相应城市分站的方法
2015/03/25 PHP
jQuery find和children方法使用
2011/01/31 Javascript
ExtJS4 组件化编程,动态加载,面向对象,Direct
2011/05/12 Javascript
jQuery动态背景图片效果实现方法
2015/07/03 Javascript
学习JavaScript设计模式之享元模式
2016/01/18 Javascript
javascript实现数组去重的多种方法
2016/03/14 Javascript
js仿百度切换皮肤功能(html+css)
2016/07/10 Javascript
JSON对象 详解及实例代码
2016/10/18 Javascript
浅谈js键盘事件全面控制
2016/12/01 Javascript
jQuery扩展+xml实现表单验证功能的方法
2016/12/25 Javascript
js 取消页面可以选中文字的功能方法
2018/01/02 Javascript
vue+webpack实现异步组件加载的方法
2018/02/03 Javascript
详解vue-cli项目中的proxyTable跨域问题小结
2018/02/09 Javascript
Vue项目中添加锁屏功能实现思路
2018/06/29 Javascript
vue2.0移动端滑动事件vue-touch的实例代码
2018/11/27 Javascript
vue和better-scroll实现列表左右联动效果详解
2019/04/29 Javascript
vue.js 2.*项目环境搭建、运行、打包发布的详细步骤
2019/05/01 Javascript
vue 实现cli3.0中使用proxy进行代理转发
2019/10/30 Javascript
微信小程序登陆注册功能的实现代码
2019/12/10 Javascript
[10:07]2014DOTA2国际邀请赛 实拍选手现场观战DK对阵Titan
2014/07/12 DOTA
python算法学习之基数排序实例
2013/12/18 Python
详解python的几种标准输出重定向方式
2016/08/15 Python
python多线程下信号处理程序示例
2019/05/31 Python
python manage.py runserver流程解析
2019/11/08 Python
python的range和linspace使用详解
2019/11/27 Python
基于 HTML5 WebGL 实现的垃圾分类系统
2019/10/08 HTML / CSS
Timberland俄罗斯官方网上商店:全球领先的户外品牌
2020/03/15 全球购物
举例说明类变量和实例变量的区别
2016/06/30 面试题
syb养殖创业计划书
2014/01/09 职场文书
小加工厂管理制度
2014/01/21 职场文书
党的群众路线教育实践活动个人整改方案
2014/10/25 职场文书
2014年纪检工作总结
2014/11/12 职场文书
小学推普周活动总结
2015/05/07 职场文书
解决Springboot PostMapping无法获取数据的问题
2022/05/06 Java/Android