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

0

조회 수 : 3977 신고 : 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/338/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
번호 제목 글쓴이 날짜 추천 수 조회 수
186 괜찮은 구글 웹폰트 많네요. file title: [ani]깜빡이는 표정빽짱구 2018-10-23   206
185 소스 비교해 주는 사이트 title: [ani]깜빡이는 표정빽짱구 2018-10-20   203
184 웹사이트 속도 측정하고 개선해야 할부분 체크하세요. file title: [ani]깜빡이는 표정빽짱구 2018-10-19   209
183 seo 점수 알아보는 곳이라네요. title: [ani]깜빡이는 표정빽짱구 2018-10-11   218
182 카카오톡 미리보기 이미지 캐쉬 삭제 title: [ani]깜빡이는 표정빽짱구 2017-07-10   400
181 페이스북 og 이미지 캐시 업데이트 title: [ani]깜빡이는 표정빽짱구 2017-07-10   257
180 [스크랩] HTML5/CSS3 관련 팁 & 튜토리얼 title: 새싹사뎅이 2014-01-14   2063
179 모바일화면 pc에서 확인하기 file title: [ani]깜빡이는 표정빽짱구 2013-12-03   2009
178 메일링 코딩 스타일 title: [ani]깜빡이는 표정빽짱구 2013-09-29 1 2976
177 반응형 웹 참고 사이트(미디어쿼리) file title: [ani]깜빡이는 표정빽짱구 2013-06-03   2276
176 스마트폰, 태블릿 해상도와 웹브라우저별 해상도 [1] title: [ani]깜빡이는 표정빽짱구 2013-06-03 1 5796
175 반응형 웹사이트 [1] title: [ani]깜빡이는 표정빽짱구 2012-11-15   4992
174 구글 영문 웹폰트 사용하기 file title: [ani]깜빡이는 표정빽짱구 2012-08-30 2 5210
173 google.com 으로 접속하는 방법 title: [ani]깜빡이는 표정빽짱구 2012-08-24 3 5216
172 ssl 보안인증서가 설치 잘되어있는지 확인하는곳 file [1] title: [ani]깜빡이는 표정빽짱구 2012-08-16   2841
171 제가 쓰고 있는 플래쉬 코딩소스 title: [ani]방울UI 2012-05-09   1224
170 페이지 전환시 로딩이미지 보이기 [3] title: [ani]깜빡이는 표정빽짱구 2012-05-06   3977
169 scope="col" 와 scope="row" title: [ani]깜빡이는 표정빽짱구 2011-05-24   6758
168 페이스북 링크의 정보를 설정하는 방법 file title: [ani]깜빡이는 표정빽짱구 2011-03-06   8144
167 hit 아이폰/아이패드에서 '홈화면 추가' 아이콘 변경하기 file [1] title: [ani]깜빡이는 표정빽짱구 2011-02-12 1 13002