[JavaScript] 로딩 이미지 만들기

Ajax 를 이용할 때 로딩 이미지를 보여주는 기능을 만들어 보자.

이미지는 Bootstrap3 를 이용하였다.

사용법

// 초기화 및 시작

var loading = new AjaxLoading('list_id');

// 종료

loading.end();

function lodingImgTop(){
    var h = document.documentElement.clientHeight;
    var y = (window.pageYOffset) ?
            window.pageYOffset : (document.documentElement && document.documentElement.scrollTop) ?
                document.documentElement.scrollTop : (document.body) ? document.documentElement.scrollTop : 0;
    y = ((h/2)+y) - 50;
    return y;
}

function lodingImgLeft(){
    var w = document.documentElement.clientWidth;
    var x = (window.pageXOffset) ?
            window.pageXOffset : (document.documentElement && document.documentElement.scrollLeft) ?
                    document.documentElement.scrollLeft : (document.body) ? document.documentElement.scrollLeft : 0;
    x = ((w/2)+x) - 150;
    return x;
}


AjaxLoading = function(id){
    this.id = 'ajax-loading-' + id;
    this.idStr = '#ajax-loading-' + id;
    this.css = 'top:' + lodingImgTop() + 'px;left:' + lodingImgLeft() + 'px;position: absolute;z-index: 99999;vertical-align: middle; text-align: center;';
    this.start();
};
AjaxLoading.prototype = {
    start : function() {
        if( $(this.idStr).length > 0 ){
            
        }else{
            $('body').append('<div id="' + this.id + '" style="' + this.css + '"></div>');
        }
        this.create();
    },
    end : function() {
        $(this.idStr).remove();
    },
    create : function() {
        var html = 
        '<div class="text-center">' +
            '<div class="progress progress-striped active" style="width:200px;margin:auto;">' +
            '<div class="progress-bar"  role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 100%"></div>' +
        '</div>' +
        '</div>';
        $(this.idStr).html(html);
    }
};