Examples of CSS and JS implementing animation effects during web page loading-CSS Tutorial-php.cn

Examples of CSS and JS implementing animation effects during web page loading

黄舟

Release： 2017-10-28 09:34:12

Original

2874 people have browsed it

The example in this article shares the specific code of JS to achieve the effect of web page loading for your reference. The specific content is as follows

Required materials:

A loading animated gif image

Basic logic:

Modal box mask + loading.gif animation,
hidden modal box by default
When the page starts sending Ajax request data, the modal box is displayed
The request is completed, and the modal box is hidden

Let’s create a new web application through Django to practice it simply

Practice

1. Create a new Django project, create application app01, configure routing and static, omitted. Place the gif animation in the static folder with the following structure:

#2. define a function in the view, which returns the page test.html:

def test(request):
 return render(request, &#39;test.html&#39;)

Copy after login

3.test.html page is as follows:

<!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>

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

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

</body>
</html>

Copy after login

4.CSS style is as follows:

/* 模态框样式 */
.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(&#39;/static/img/loading.gif&#39;);
 position: fixed;
 left: 50%;
 top: 50%;
 margin-left: -16px;
 margin-top: -16px;
 z-index: 1001;
}

Copy after login

Description:

Passed Set position: fixed, and set the top, bottom, left and right to 0, so that the modal box covers the entire page;
Set the gif dynamic image as the background and center it to show the loading effect;
By setting the z-index value, the gif image is suspended above the modal box;
background-color: black; is to make it look obvious, specifically It can be set to white when used;

5.JS file is as follows:

$(function () {
 //准备请求数据，显示模态框
 $(&#39;p.loading&#39;).show();

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

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

   //请求完成，隐藏模态框
   $(&#39;p.loading&#39;).hide();
  }
 })
});

Copy after login

Instructions:

After the page is loaded, start sending Ajax requests, Request data from the server-side ajax_handler view, then display the modal box
After the request is completed, regardless of success or failure, hide the modal box

6.ajax_handler view is as follows, it simulates network delay and returns some String:

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

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

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

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

Copy after login

The effect is as follows:

The above is the detailed content of Examples of CSS and JS implementing animation effects during web page loading. For more information, please follow other related articles on the PHP Chinese website!