块UI旋转预加载器

<div id=\"throbber\" style=\"display:none;\">
    <img src=\"/img/busy.gif\" />
</div>

$.blockUI({ message: $(\'#throbber\') });

$.ajax({
    complete: function(data) {
        // kill the block on either success or error
        $.unblockUI();
    }
});

function ReloadDetails(id) {
    $(\'#\' + id + \'_Details\').block({ message: $(\'<img src=\"/images/ajax-loader.gif\"/>\') });
    $.get(...);
}

<div id=\"throbber\" class=\"modal\" role=\"dialog\" style=\"display:none; position:relative; opacity:0.6; background-color:white;\">
    <img style=\"margin: 0 auto;
                position: absolute;
                top: 0; bottom: 0; left:0; right:0;
                margin: auto;
                display: block;
               \" src=\"/static/images/spinning.gif\" />
</div>

<div class=\"row\">
    <div class=\"col-lg-12\">
        <div class=\"pull-right\">
            <button type=\"button\" id=\"reload\" class=\"btn btn-primary pull-right-button\" style=\"width: 120px;\">Reload</button>
        </div>
    </div>
</div>

function block() {
    var body = $(\'#panel-body\');
    var w = body.css(\"width\");
    var h = body.css(\"height\");
    var trb = $(\'#throbber\');
    var position = body.offset(); // top and left coord, related to document

    trb.css({
        width: w,
        height: h,
        opacity: 0.7,
        position: \'absolute\',
        top:        position.top,
        left:       position.left
    });
    trb.show();
}
function unblock() {
    var trb = $(\'#throbber\');
    trb.hide();
}
$(document).ready(function(){
    $(\'#reload\').click(function(){
        block();
        $.ajax({
            type:       \"GET\",
            url:        \"{% url \'scriptsList\'%}\",
            async:      false
        });
        setTimeout(function(){
            unblock();
        }, 500); //wait 0.5 second to see the spinning gif

    });
});