- Javascript&CSS〃웹사이트 로딩중 이미지2020년 06월 16일
- TheStorybook
- 작성자
- 2020.06.16.:46
이번글은 웹사이트나 홈페이지에서 이미지나 CSS, JavaScript 등을 전송받을때 로딩중 이미지를 띄우는 방법입니다. 아주 간단하게 자바스크립트와 CSS로만 만들어서 메인페이지나 쓰고자 하는 페이지에 간단히 복사 붙여넣기로 적용만 시키면 됩니다.
■ 로딩 이미지 만들기
여러가지 로딩 이미지를 제공합니다.
쉽고 간단한 로딩 이미지를 만들 수 있습니다.
■ 로딩 소스
위에서 로딩이미지를 생성하셨다면 다음은 소스를 입혀줄 차례입니다.
먼저 CSS소스
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<style>
#loading {
width: 100%;
height: 100%;
top: 0px;
left: 0px;
position: fixed;
display: block;
opacity: 0.7;
background-color: #fff;
z-index: 99;
text-align: center; }
#loading-image {
position: absolute;
top: 50%;
left: 50%;
z-index: 100; }
</style>
다음은 SCRIPT 소스
1
2
3
4
5
<script type="text/javascript">
$(window).load(function() {
$('#loading').hide();
});
</script>
마지막으로 HTML or JSP <BODY></BODY>안에 들어가는 소스
1
<div id="loading"><img id="loading-image" src="/images/loading.gif" alt="Loading..." /></div>
이정도면 이미지나 AJAX 통신을 할때 로딩중 이미지를 보여주고, 모든 응답이 끝나면 사라집니다. 끝~~!!
출처: https://hunit.tistory.com/309 [Ara Blog]'작업 소스들' 카테고리의 다른 글
그라데이션 css 만들어주는 사이트 (0) 2020.07.16 box (박스) 테두리 그림자 만들어주는 사이트 (0) 2020.07.16 [css] 모바일 브라우저 상단 색상을 지정해보자 (0) 2020.05.28 CSS / CSS로 문자열 자르기 - 한 줄인 경우, 여러 줄인 경우 (0) 2020.05.22 네이버 스와이프 메뉴 구현하기 (4) 2020.05.22 다음글이전글이전 글이 없습니다.댓글