javascriptでページ読み込み中を表示させる

JavaScript

ここでは、Javascriptを使ってバックグラウンドで処理中にページ読み込み中のを表示させるサンプルを紹介します。
仕組みは、簡単です。
まず、初期値は、ローディング中のDIVを非表示にしておき、バックグラウンド処理を行う時にメインコンテンツを非表示にし、ローディング中を表示させるのみです。そして、バッググランド処理が終わったらその逆を行うだけです。
サンプルは下記になります。

HTML

<style>
/* ローディング中を非表示にしておく */
#loading{
    display: none;
}
.outer{
    text-align: center;
}
.inner{
    padding: 100px 0 0 0;
    display: block;
    margin-left: auto;
    margin-right: auto;
}
</style>

<!-- 読み込み中に表示 -->
<div id="loading" class="outer">
    <img src="loading.gif" class="inner">
    <p class="text-muted">PDFを作成中です。しばらくお待ちください。</p>
</div>

<!-- メインコンテンツ部分 -->
<div id="main_contents">
</div>

Javascript

function onclickPdf(){
    //ローディング中を表示
    $("#loading").show();

    //ローディング中を非表示
    $("#main_contents").hide();

    new $.ajax({
        type: 'post',
        url: 'pdf.php',
        data: {format: "json"},
        success: function(data){
            //ローディング中を非表示
            $("#loading").hide();

            //メインコンテンツを再表示
            $("#main_contents").show();

            location.href='pdf_output.php;
        }
    });

}
</script>

JavaScript