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>