Simulz :: (jQuery) 블로그에 로딩 중 표시하기

(jQuery) 블로그에 로딩 중 표시하기

PC&웹/웹프로그래밍 : 2010/02/05 19:14

준비물: (jQuery) 연결하기

이 블로그에 적용되어 있다.

HTML에서 로딩 메시지 코드를 추가한다. 문서 상단에 추가할 수록 빨리 보인다. <html> 바로 밑에 넣어도 된다.

CSS에 추가한다.

width, height를 알맞게 바꾼 후, margin의 top, left에 50%의 값을 입력한다.

아래의 자바스크립트 코드를 SCRIPT 내부 또는 JS 파일로 저장하여 연결한다.

.fadeOut(speed, callback)
매치된 요소를 감춘다. 인자를 입력하지 않으면 400ms 속도로 작동한다.

speed 인자에는 'slow', 'normal', 'fast' 를 입력할 수 있으며 각각 600ms, 400ms, 200ms 이다.
또는 밀리초를 숫자로 입력하면 된다.

.fadeOut() 메서드 대신 다른 효과 메서드를 사용할 수 있다. .hide(), .slideUp() .animate()

나중에 실행될 수록 늦게 감춰지므로 다른 자바스크립트 코드 밑에 삽입한다.

※ jQuery의 .ready() 메서드는 DOM이 로드되고 이미지가 로드되기 직전에 실행된다.
자바스크립트의 onload 등을 사용하면 이미지까지 모두 불러와야 실행된다.

위 소스코드는 자바스크립트를 사용할 수 없는 환경에서는 로딩 메시지가 항상 떠있게 된다.
이 때는 style 속성에 display:none;을 추가하고 문서 상단에 자바스크립트로 보이도록 해야 한다.

'PC&웹 > 웹프로그래밍' 카테고리의 다른 글

(jQuery Plugin) CyclicFade 깜빡이는 효과 적용하기 (0)	2010/02/06
(jQuery) 블로그 태그 목록을 버튼으로 섞기 (0)	2010/02/05
(jQuery) 블로그에 로딩 중 표시하기 (0)	2010/02/05
(jQuery) 태그 목록 섞기 (0)	2010/02/05
(jQuery) 티스토리 태그 목록 컬러풀하게~ (0)	2010/02/05
(카운터) 블로그용 페이지 카운터 - 자바스크립트로 변경 (0)	2010/02/04