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

0

조회 수 : 3981 신고 : 0

profile
작성자 : title: [ani]깜빡이는 표정빽짱구
포인트 : 56933 | 레벨 : 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/d49/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 조회 수
166 seo 점수 알아보는 곳이라네요. title: [ani]깜빡이는 표정빽짱구 2018-10-11   224
165 무단링크 .htaccess에서 막기 [1] title: [ani]깜빡이는 표정빽짱구 2010-12-08   5283
164 모바일 환경에서의 마크업 개발 이슈 title: [ani]깜빡이는 표정빽짱구 2010-12-17   5011
163 페이스북 링크의 정보를 설정하는 방법 file title: [ani]깜빡이는 표정빽짱구 2011-03-06   8150
162 scope="col" 와 scope="row" title: [ani]깜빡이는 표정빽짱구 2011-05-24   6809
161 페이지 전환시 로딩이미지 보이기 [3] title: [ani]깜빡이는 표정빽짱구 2012-05-06   3981
160 제가 쓰고 있는 플래쉬 코딩소스 title: [ani]방울UI 2012-05-09   1225
159 반응형 웹사이트 [1] title: [ani]깜빡이는 표정빽짱구 2012-11-15   4995
158 ssl 보안인증서가 설치 잘되어있는지 확인하는곳 file [1] title: [ani]깜빡이는 표정빽짱구 2012-08-16   2845
157 반응형 웹 참고 사이트(미디어쿼리) file title: [ani]깜빡이는 표정빽짱구 2013-06-03   2277
156 모바일화면 pc에서 확인하기 file title: [ani]깜빡이는 표정빽짱구 2013-12-03   2012
155 [스크랩] HTML5/CSS3 관련 팁 & 튜토리얼 title: 새싹사뎅이 2014-01-14   2067
154 페이스북 og 이미지 캐시 업데이트 title: [ani]깜빡이는 표정빽짱구 2017-07-10   264
153 카카오톡 미리보기 이미지 캐쉬 삭제 title: [ani]깜빡이는 표정빽짱구 2017-07-10   416
152 괜찮은 구글 웹폰트 많네요. file title: [ani]깜빡이는 표정빽짱구 2018-10-23   216
151 웹접근성에 대해서.. file [6] title: [ani]깜빡이는 표정빽짱구 2007-11-06 1 5537
150 플래쉬에 마우스 오른쪽 버튼 클릭시 메뉴줄이기 file [2] title: [ani]깜빡이는 표정빽짱구 2008-03-05 1 8042
149 hit 아이폰/아이패드에서 '홈화면 추가' 아이콘 변경하기 file [1] title: [ani]깜빡이는 표정빽짱구 2011-02-12 1 13011
148 메일링 코딩 스타일 title: [ani]깜빡이는 표정빽짱구 2013-09-29 1 2981
147 스마트폰, 태블릿 해상도와 웹브라우저별 해상도 [1] title: [ani]깜빡이는 표정빽짱구 2013-06-03 1 5813