JS+CSS 웹 페이지 로 딩 중 애니메이션 효과 구현
필요 한 재료:
loading 애니메이션 gif 그림
기본 논리:
모드 상자 커버+loading.gif 움 직 이 는 그림,
기본 숨 김 모드 상자
페이지 가 Ajax 요청 데 이 터 를 보 내기 시 작 했 을 때 모드 상 자 를 표시 합 니 다.
요청 완료,모드 상자 숨 기기
다음은 Django 를 통 해 웹 애플 리 케 이 션 을 새로 만 들 고 간단하게 실천 해 보 겠 습 니 다.
실천 하 다.
1.Django 프로젝트 를 새로 만 들 고 app 01 을 만 들 며 경로 와 static 를 설정 합 니 다.gif 동 도 를 정적 폴 더 아래 에 두 고 구 조 는 다음 과 같 습 니 다.
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>
<div id="content">
<p> ....</p>
</div>
<!-- -->
<div class="loading hide">
<div class="gif"></div>
</div>
</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 () {
// ，
$('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 요청 을 보 내기 시작 합 니 다.서버 ajaxhandler 보기 요청 데이터,모드 상자 표시
요청 이 완료 되면 성공 여부 와 상 관 없 이 모드 상 자 를 숨 깁 니 다.
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)})
gif 동 도 를 표시 하지 못 하면 브 라 우 저 캐 시 문제 일 수 있 습 니 다.프로젝트 의 전체 코드 는 여기에 있 습 니 다https://github.com/Ayhan-Huang/Loading
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
JS 판단 수조 네 가지 실현 방법 상세그러면 본고는 주로 몇 가지 판단 방식과 방식 판단의 원리를 바탕으로 문제가 있는지 토론하고자 한다. 예를 들어 html에 여러 개의 iframe 대상이 있으면 instanceof의 검증 결과가 기대에 부합되지 않을...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
