반응형
웹페이지를 제작하다 보면 페이지 로딩이 오래 걸려 중간에 이탈하는 사용자가 생기곤 한다.
이를 조금이나 방지하지위해 페이지 로딩 시 로딩 화면이 나오게 구현해 보겠다.
1. 로딩이미지 다운
2. 코드 적용
1. 로딩이미지
- 다운 아래의 링크로 들어가 원하는 로딩 이미지를 다운로드한다.
- 원하는 로딩 이미지 커스텀 후 GIF 클릭해서 다운로드하기
- 다운로드한 파일 images -> loading.gif 저장
2. 코드 적용
- <head>와 </head> 사이에 아래의 코드 추가
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
- <body>와 </body> 사이에 아래의 코드 추가
<div class= "load" id="load">
<img src="images/loading.gif" alt="loading">
</div>
- </body> 바깥쪽에 아래의 코드 추가
<script type="text/javascript">
// 로딩 함수
$(document).ready(function() {
$('#load').hide();
});
</script>
- style.css 에 아래의 코드 추가
.load {
width: 100%;
height: 100%;
top: 0;
left: 0;
position: fixed;
display: block;
opacity: 0.8;
background: white;
z-index: 99;
text-align: center;
}
.load > img {
margin: 55% auto;
z-index: 100;
}
- 혹시 style.css를 만들지 않았다면 <hade></hade> 사이에 추가
<style>
#load {
width: 100%;
height: 100%;
top: 0;
left: 0;
position: fixed;
display: block;
opacity: 0.8;
background: white;
z-index: 99;
text-align: center;
}
#load > img {
margin: 55% auto;
z-index: 100;
}
</style>
- 테스트 시에 너무 빠르게 로딩된다 보니 잘 보이지 않는다 이럴 때에는 아래의 코드와 같이 hide에서 show로 바꿔주면 잘 보인다.
<script type="text/javascript">
// 로딩 함수
$(document).ready(function() {
$('#load').show();
});
</script>
반응형
'WEB' 카테고리의 다른 글
| [연예인으로 보는 외모티어 테스트(여자 편) APP 출시] (0) | 2022.07.05 |
|---|---|
| [외모 티어 테스트]연예인으로 보는 나의 외모 티어 테스트(여자 편) (0) | 2022.06.29 |
| [Html] 부트스트랩 a태그 밑줄 지우기 (0) | 2022.06.04 |
| [MariaDB] 재귀쿼리를 활용한 트리구조 메뉴 만들기 RECURSIVE (0) | 2022.05.30 |
| [Nuxt.js] Component간 데이터 바인딩 props, $emit 을 이용한 popUp구현 (0) | 2022.05.27 |
