블로그에 로딩 화면 만들기

이미지 업로드하기

먼저 사용할 이미지를 업로드 해야한다. 파일명은 loading.gif로 저는 코딩되어 있어서 이렇게 파일명을 이렇게 진행하는데 원하는 이름으로 바꾸시려는 분은 코드를 손봐야한다는 것을 알려둡니다.

 

스킨 편집 > html 편집 > 파일업로드에 업로드 하면 된다.

 

로딩 화면 코드 위치 확인하기

스킨편집 > html 편집 > html 탭으로 이동하여 head 태그가 끝나고 body 태그가 시작되는 바로 다음 위치에 코드를 작성한다. <body로 검색하면 찾을 수 있다.

 

코드 작성하기

<!-- 블로그 로딩 코드 start -->
<style type="text/css">
#waiting {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: fixed;
    display: flex;
    background: white;
    z-index: 999;
    opacity: 0.9;
}
#waiting > img {
    display: flex;
    width: fit-content;
    height: fit-content;
    margin: auto;
}
</style>
<div id="waiting">
	<img src="./images/loading.gif">
</div>
<script type="text/javascript">
    $(window).on('load', function() {
        setTimeout(function(){
            $("#waiting").fadeOut();
        }, 500);
    });
</script>
<!-- 블로그 로딩 코드 end -->

적용이 용이하도록 html, 자바스크립트, css 코드를 한군데 모두 작성되어있다. 화면이 모두 로드되기 전에 띄워줘야 하므로 맨 위쪽에 넣고 페이지가 전부 로드되었다는 것이 감지되면 로딩 화면을 감추기 위해 코드도 자바스크립트로 작성한다. 광고를 위해 500ms의 여유 시간을 두게 작성되어 있는데 사용자편의에 맞게 수정하면 로딩시간을 컨트롤할 수 있다.