ボタンを押したらローディング画面を表示する
2013-04-30 879 2006更新 2018-11-26 新しい記事にもっと簡単な方法が載っています
この記事に関する最新記事は「ボタンを押したらローディング(くるくる回るスピナー)を表示する(ローディング画像不要CSSのみ)」になります。下記の古い内容よりも画像ファイルが不要で使い勝手がいいので、新しい記事をご覧ください。
古い方法でよければ以下をご覧ください。
管理画面で時間のかかる処理（例えば画像や動画などをアップロードする際）をする場合、画面が固まってしまったと勘違いされて閉じられたり、ボタンを何度も押されてバグを発生させてしまうこともあるかもしれない。
そこで、ローディング画面を表示して、ユーザーに「現在処理中ですよ」と知らせる必要があるのである。jQueryにローディング画像が必要のない便利な「Activity Indicator」というライブラリがあるので紹介しよう。
まずは、jQuery本体とcssを読み込む。#loadingは画面いっぱいにちょっと暗くするための箱。
<!----><!----><script type="text/javascript" src="/js/jquery.js"></script>次に、body開始タグの先頭でid名を付けて空divを書いておく。あと、コンテンツ内でローディングを発動させる為のボタンやリンクにクラス名を付ける。
<!----><!----><style type="text/css">
<!--
#loading{
width:100%;
height:100%;
position:fixed;
top:0;
left:0;
background:#000;
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
z-index:99;
display:none;
}
.square {
width:100%;
height:100%;
color: #000;
position:fixed;
top:50%;
left:50%;
font-family: Helvetica, Arial, Sans-Serif;
z-index:100;
}
-->
</style>
<body>bodyタグの最後あたりでjqueryライブラリを読み込んで、ちょちょいとスクリプトを書いておく。これで動作しなかったら、jqueryのバージョンをあげてみる必要がある。今回の例は「.loading」が押されたら、「#loading」を発動させるという形式。
<div id="loading"></div>
・
・
・
<input type="submit" value="アップロード" class="loading">
<!----><!----><script type="text/javascript" src="/js/activity-indicator.min.js"></script>この「activity-indicator.min.js」は初期状態ではgoogle chrome（グーグルクローム）で動かないので、ちょっと補正が必要。
<!----><!----><script type="text/javascript">
$("input.loading").click(function(){
$('#loading').show().activity({
segments:12,
width:12,
space:6,
length:28,
color:'#fff',
speed:1.5
});
});
</script>
初期→ document.styleSheets[0].insertRule(rule);ちなみにjqueryのライブラリやスクリプトは基本的に最後の方で読み込んだほうがサイトの高速化に繋がる。最高峰のアクセス数を誇る、楽天・yahoo・youtubeのトップページのソースコードでも最後の方に多くのスクリプトを書いている。
修正→ document.styleSheets[0].insertRule(rule,document.styleSheets[0].cssRules.length);
