Skip to content

Making Website Loading Page with Javascript (사이트 로딩 페이지 만들기)

2013년 12월 11일

웹사이트 만들때 자바스크립트모듈이 많고 그 시간이 상당히 걸릴 경우가 있습니다.

특히 네트워크가 안좋은 곳은 전체 자바스크립트 모듈의 용량이 100K 정도 될 경우 몇초간 다운로드까지 대기해야하는 경우가 있죠. 이럴 경우 어떻게 자바스크립트로 로딩중이라는 메시지를 줄 수 있을 까요.

제가 사용하는 방법은 Initial Page에 자바스크립트를 삽입하는 방식입니다.

Javascript가 다운로드가 된 후 web page 내용이 변화가 되는데, 변화되기 전에 initial tag를 두고 그 initial tag를 사라지는 이벤트를 만들어 사라지게되면 화면에 loading 창과 함께 이벤트가 사라지는 코드입니다. 추가적으로 로딩중 다운로드에 실패했을 경우 페이지가 로딩안되는 경우를 대비해, 일정 시간이 지나면 페이지를 리로딩 하게 됩니다. 이렇게 로직을 구성할 경우 간단히 로딩창을 만드는 로직을 만드실 수 있습니다.

Loading Screen (로딩중 화면)

Image

Original Site Screen (원래 사이트 화면)

Image

Source Code (소스코드)

<h1>Loading<span id="base_loading"></span></h1>
<script type="text/javascript">
GLOBAL.initial_loading_params = {
    limit_dot_count: 15,
    reload_latent_count: 3,
    loading_speed: 700,
    loading_id: 'base_loading'
};
GLOBAL.initial_loading = function (params) {
    var that = this;
    var reload_final_count = params.limit_dot_count + params.reload_latent_count
    var base_loader_count = 0;
    that.loading_interval_id = setInterval(function () {
        if (document.getElementById(params.loading_id) != null) {
            ++base_loader_count;
            if (params.base_loader_count > reload_final_count) {
                window.location.reload();
                that.stopBaseLoading();
            } else if (base_loader_count > params.reload_latent_count) {
                document.getElementById(params.loading_id).innerHTML = '<a href="">.....Reload</a>';
            } else {
                var loading_text = '';
                var j = 0;
                while (j++ < base_loader_count) {
                    loading_text += '.';
                }
                document.getElementById(params.loading_id).innerHTML = loading_text;
            }
        } else {
            that.stopBaseLoading();
        }
    }, params.loading_speed);

    that.stopBaseLoading = function () {
        clearInterval(that.loading_interval_id);
        console.log('finish loading!');
    };
    return {
        abort: function () {
            that.stopBaseLoading();
        }
    };
}(GLOBAL.initial_loading_params);
</script>
Advertisements

From → Development

댓글 남기기

답글 남기기

아래 항목을 채우거나 오른쪽 아이콘 중 하나를 클릭하여 로그 인 하세요:

WordPress.com 로고

WordPress.com의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Twitter 사진

Twitter의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Facebook 사진

Facebook의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Google+ photo

Google+의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

%s에 연결하는 중

%d 블로거가 이것을 좋아합니다: