이 글의 예시는 참고용으로 웹 페이지 로딩 효과를 얻기 위한 JS의 특정 코드를 공유합니다. 구체적인 내용은 다음과 같습니다
필요 자료:
로딩 애니메이션 gif 이미지
기본 논리:
모달 상자 마스크 + loading.gif 애니메이션,
모달 상자는 기본적으로 숨겨집니다.
페이지에서 Ajax 요청 데이터 전송을 시작하면 모달 상자가 표시됩니다
요청이 완료되고 모달 상자가 숨겨집니다.
이제 Django를 통해 새로운 웹 애플리케이션을 생성해보겠습니다. 간단한 연습을 해보겠습니다
Practice
1. 새로운 Django 프로젝트 생성, 애플리케이션 app01 생성, 라우팅 및 정적 구성, 생략합니다.
2. test.html 페이지를 반환하는 함수 를 정의합니다.
def test(request): return render(request, '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> <p id="content"> <p>正在请求服务器数据....</p> </p> <!-- 模态框部分 --> <p class="loading hide"> <p class="gif"></p> </p> </body> </html>
/* 模态框样式 */ .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; }
$(function () { //准备请求数据,显示模态框 $('p.loading').show(); $.ajax({ url: "/ajax_handler.html/", type: 'GET', data: {}, success: function (response) { var content = response.content; $('#content').html(content); //请求完成,隐藏模态框 $('p.loading').hide(); }, error: function () { $('#content').html('server error...'); //请求完成,隐藏模态框 $('p.loading').hide(); } }) });
지침:
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)})
위 내용은 웹 페이지 로딩 중 애니메이션 효과를 구현하는 CSS 및 JS의 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!