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

로딩페이지가 필요한 이유

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

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

 

html

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

 

 

JS

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

 

CSS

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

 

 

이렇게하면 스레드 웹사이트 같은 로딩화면 가능하다

예)