[HTML] 로딩이 완료된 후 페이지 노출하기

로딩페이지가 필요한 이유

페이지가 로딩할 때 이미지들이 다운되는게 보여지기때문에 홈페이지의 오류처럼 받아들일 수 있다.

이런경우에 하얀여백이나 로딩애니메이션을 넣어서 대응이 가능하다.

 

HTML

<div class="loading"></div>

 

JS

<script>
   $(window).on("load",function () {
        $(".loading").fadeOut();
    });
</script>

 

경축! 아무것도 안하여 에스천사게임즈가 새로운 모습으로 재오픈 하였습니다.
어린이용이며, 설치가 필요없는 브라우저 게임입니다.
https://s1004games.com

CSS

/*******************************************************************
* loading --- common
********************************************************************/
.loading{
    width:100%;
    height:100%;
    position:fixed;
    left:0px;
    top:0px;
    background:#fff;
    z-index:100000000;
}

 

[출처] https://yooooung.tistory.com/10

 

 

 

본 웹사이트는 광고를 포함하고 있습니다.
광고 클릭에서 발생하는 수익금은 모두 웹사이트 서버의 유지 및 관리, 그리고 기술 콘텐츠 향상을 위해 쓰여집니다.
번호 제목 글쓴이 날짜 조회 수
274 [프론트앤드] 리액트(React) 간단 문법 정리 file 졸리운_곰 2025.11.19 549
273 [HTML] [HTTP] 주요 메서드 5가지 정리(GET / POST / PUT / PATCH / DELETE) file 졸리운_곰 2025.04.21 388
272 [JavaScript] Algorithm | Fizz Buzz 졸리운_곰 2025.01.03 365
271 [HTML] How to force link from iframe to be opened in the parent window : iframe에서 부모 창에서 열리도록 링크를 강제하는 방법 졸리운_곰 2024.08.22 350
270 [Javascript] jQuery 달력 위젯 datepicker 사용하기 file 졸리운_곰 2024.08.13 546
269 [Javascript] onload, ready file 졸리운_곰 2024.08.13 460
268 [javascript] 제이쿼리로 시도, 시군구 선택하기 졸리운_곰 2024.08.13 516
267 [HTML] CSS 파일 불러오기 졸리운_곰 2024.08.09 469
266 [HTML/CSS] [SCSS] HTML에 SCSS 적용하는 법 / how to apply scss to html file 졸리운_곰 2024.08.09 383
265 [HTML/CSS] [SCSS] HTML에 SCSS 적용하는 법 file 졸리운_곰 2024.08.09 610
264 [HTML] Netlify 로 정적 웹 사이트 배포하기 file 졸리운_곰 2024.07.29 402
263 [JavaScript] 자바스크립트 API 호출 방법 졸리운_곰 2024.06.20 525
262 [HTML][JavaScript] jQuery .ready() vs .onload() 특징 및 차이 졸리운_곰 2024.05.23 442
261 [apache 설정] .htaccess 캐시 및 압축 설정 졸리운_곰 2024.05.22 486
» [HTML] 로딩이 완료된 후 페이지 노출하기 졸리운_곰 2024.05.22 502
259 [HTML] HTML A tag: name=" " 같은 페이지(문서) 또는 다른 페이지의 특정 위치로 이동하기 졸리운_곰 2024.05.20 411
258 [HTML] Scroll window to top of Iframe from iFrame with different domain than parent file 졸리운_곰 2024.05.20 455
257 [HTML] iframe 간단 정리하기 file 졸리운_곰 2024.05.20 271
256 [HTML] Javascript error: 'window.top.document.getElementById(...)' is null or not an object 졸리운_곰 2024.05.20 206
255 [HTML] iframe 부모 자식 접근 졸리운_곰 2024.05.20 344
대표 김성준 주소 : 경기 용인 분당수지 U타워 등록번호 : 142-07-27414
통신판매업 신고 : 제2012-용인수지-0185호 출판업 신고 : 수지구청 제 123호 개인정보보호최고책임자 : 김성준 sjkim70@stechstar.com
대표전화 : 010-4589-2193 [fax] 02-6280-1294 COPYRIGHT(C) stechstar.com ALL RIGHTS RESERVED