웹사이트 관련 팁들을 모아놓은 곳입니다. 좋은팁 공유 합시다.
  • 웹미니 한줄 전광판 영역 입니다.
글 수 186

0

조회 수 : 3990 신고 : 0

profile
작성자 : title: [ani]깜빡이는 표정빽짱구
포인트 : 56938 | 레벨 : 25
먼저 로딩이미지는 아래주소로 가시면 팁이 있습니다.
http:///385406
 
만드신 로딩이미지는 서버에 업로드 하시고
 
페이지 body 바로 아래 XE기준으로는 레이아웃 상단에 아래의 소스를 넣습니다.
(참고로 jquery 사용하실때는 기본 jquery 코어 파일은 불러와야합니다.)
 
<script type="text/javascript">
jQuery(function($){
    $(window).load(function(){
      $('#loadingBar').css('display','none');
      $('#loadingBg').css('display','none');
    });
});
</script>
 
<div id="loadingBar">
<img src="로딩이미지경로" alt="" />
</div>
<div id="loadingBg"></div>
 
ID값은 맞춰주세요.
 
CSS는 아래와 같이해주세요.
#loadingBar{position:fixed;top:50%;left:50%;width:200px;height:200px;margin:-50px 0 0 -100px;text-align:center;z-index:99}
#loadingBar .title{display:block;padding:10px;10px 0 10px;overflow:hidden}
#loadingBg{position:fixed;top:0;left:0;width:100%;height:100%;background:#fff;overflow:hidden;z-index:98}
태그
profile 글쓴이 빽짱구

단점이 없는 사람은 장점도 거의 없다 - 에이브러햄 링컨

엮인글 :
https://web.webmini.net/webtip/386020/652/trackback
소중한 댓글 부탁드립니다.
추천수 10단위당 메달이 1개씩 노출되고, 추천수에 따라 배경색이 변하며, 일정수의 추천수를 받을시 BEST 아이콘이 붙게됩니다.
추천수에 따른 배경색 보기 본문으로 바로가기
  • 추천수 50개이상
  • 추천수 30개이상
  • 추천수 20개이상
  • 추천수 10개이상
  • 추천수 3개이상
닫기

댓글 '3'

리턴 (386319)

2012.05.09 12:46:55

좋은방법이네요ㅎ

jnk(522605)

2013.07.11 18:57:42

잘 이해가 안되는데요 디비전을 보였다 안보였다 하는데

보였다가 안 보였다가 하는 시점은 어떻게 판단하는거에요?

profile
title: [ani]깜빡이는 표정빽짱구 (571149)

2015.12.22 15:53:10

작성자

jnk (522605) 에 대한 댓글

로딩이미지가 페이지 첫번째 보여지면서 흰색 모달창이 전체를 가리게 됩니다. 그리고 전체 페이지가 로딩이 되었을때 로딩이미지와 전체를 가린 흰색 모달창이 사라지게 되는 방식입니다.

List of Articles
번호 제목 글쓴이 날짜 추천 수sort 조회 수
126 자동으로 페이지 전환 [3] title: [ani]깜빡이는 표정빽짱구 2004-02-08 18 3340
125 메타태그란? [3] title: [ani]깜빡이는 표정빽짱구 2004-02-08 18 3323
124 http ? [1] title: [ani]깜빡이는 표정빽짱구 2004-02-08 18 2492
123 움직이는 알림장 [1] title: [ani]깜빡이는 표정빽짱구 2004-08-06 17 2609
122 링크 점선 테투리 없애기!! [3] 톡톡 2004-03-24 17 3156
121 홈페이지란 무엇인가? [1] title: [ani]깜빡이는 표정빽짱구 2004-02-08 17 2609
120 배너광고 효과 높이기 [4] title: [ani]깜빡이는 표정빽짱구 2004-02-07 17 3441
119 잘못된 html코딩습관 몇가지 [5] title: [ani]깜빡이는 표정빽짱구 2004-02-07 17 3629
118 포토샵에서 텍스트작업 [9] title: [ani]깜빡이는 표정빽짱구 2005-07-04 16 7602
117 이전, 다음 버튼이 있는 달력 title: [ani]깜빡이는 표정빽짱구 2004-04-22 16 3002
116 세계 시간보기 title: [ani]깜빡이는 표정빽짱구 2004-04-18 16 3608
115 [나야나] 계정에 알ftp로 파일 올리는 방법 title: [ani]깜빡이는 표정빽짱구 2004-04-12 16 3752
114 포인트에 따른 자동레벨변경 title: [ani]깜빡이는 표정빽짱구 2004-03-29 16 2262
113 입력란에 한글만 입력되게 하기. [2] title: [ani]깜빡이는 표정빽짱구 2004-02-22 16 3267
112 phpmyadmin을 내 계정에 설치하기 [5] title: [ani]깜빡이는 표정빽짱구 2005-09-27 15 7837
111 누르기 버튼 이뿌게 만들기 [2] title: [ani]깜빡이는 표정빽짱구 2004-08-16 15 2537
110 검색엔진 달기 [2] title: [ani]깜빡이는 표정빽짱구 2004-08-10 15 3539
109 투명하게 보이기 위한 레이어에 적용 [2] title: [ani]보라색 나비바비인형 2004-06-23 15 3030
108 풀윈도우 다른팁 title: [ani]깜빡이는 표정빽짱구 2004-05-04 15 2513
107 한영전환 변환키 [1] title: [ani]깜빡이는 표정빽짱구 2004-04-05 15 3173