• 목록

안녕하세요.

오늘 알아볼 사이트는 홈페이지 만드는 분들에게 유용한 정보 입니다.

사이트 접속시 빙글빙글 돌아가는 gif 이미지, loading gif 이미지 아시나요? 

그것을 쉽고 빠르게 웹에서 만들어 주는 사이트 입니다.

http://ajaxload.info/

무료 로딩이미지(loading gif) 만들기

1. 만들 이미지 선택/설정하기

윗부분 설정에서 indicator type을 클릭하면 다양한 형태의 로딩이미지를 선택 할 수 있습니다.

2. 만들기(Generate it) 클릭

3. 미리보기로 확인하기

4. 다운로드 받기

5. 사이트에 적용하기

위에서 만든 로딩 이미지를 사이트에 적용하는 방법을 알아보겠습니다.

아래 소스를 넣으면 사이트 접속시 접속 완료 될때까지 이미지를 보여 줍니다.

1) CSS

<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>

2) 자바스크립트

<script type="text/javascript"> $(window).load(function() { $('#loading').hide(); }); </script>

3) HTML

<div id="loading"><img id="loading-image" src="/images/loading.gif" alt="Loading..." /></div>