250x250
Notice
Recent Posts
Recent Comments
Link
반응형
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | ||||||
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 |
Tags
- CSS
- map
- Properties
- NIO
- 힙덤프
- 큐
- JPA
- dfs
- math
- Java
- javascript
- Union-find
- date
- 스택
- scanner
- Calendar
- sql
- BFS
- deque
- priority_queue
- spring boot
- string
- List
- union_find
- set
- html
- GC로그수집
- alter
- 스프링부트
- 리소스모니터링
Archives
- Today
- Total
매일 조금씩
[Django][Python] 로딩페이지 작성하기 - SetTimeout() 본문
728x90
반응형
웹 또는 앱을 처음 실행 시켰을 때 나오는 로딩 페이지를 다음페이지로 넘어가는것을 특정시간 delay시켜 원하는 로딩 페이지를 띄우도록 구현했다.
![](https://blog.kakaocdn.net/dn/biBxi1/btqxXaxFISK/ClrEOrYIdeJ0mVkKD847HK/img.png)
위와 같이 chachacha폴더의 chachacha-master라는 프로젝트는
bars, maps,users의 총 3개의 앱을 가진다.
그중 users 앱의 templates 폴더에 loading.html을 만든다.
![](https://blog.kakaocdn.net/dn/dwAaIl/btqxXIOtCj7/VrNrtAJ0trFnsrtE2m1JU1/img.png)
![](https://blog.kakaocdn.net/dn/cLDFWH/btqxZR4PR3V/HAPKoIPk6Se2KUNCfcj1p1/img.png)
앱을 열었을 때 3초 정도 delay를 주기 위해
setTimeout()을 사용한다.
{% load staticfiles %} <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script> <title>Document</title> </head> <body> <div id="loading"> <img src="{% static 'opening.gif' %}" alt="" > </div> </body> <style> #loading{ padding-top: 40; margin-left: 10; } img{ position: absolute; height: 85%; text-align:center; } </style> <script> $(document).ready(function(){ setTimeout(function(){ if (window.location == 'http://127.0.0.1:8000/users/loading' ) { window.location.href='http://127.0.0.1:8000/users';}}, 30000) }) </script> </html>
if (window.location == 'http://127.0.0.1:8000/users/loading' ) { window.location.href='http://127.0.0.1:8000/users';}}, 30000)
이 조건문으로 인해 30초 뒤에
'http://127.0.0.1:8000/users/loading'(로딩 페이지) 에서
'http://127.0.0.1:8000/users'(원래 들어가려던 페이지)로 이동 된다.
728x90
반응형