ボタンを押したらローディング画面を表示する

2013-04-30 01:36:10
管理画面で時間のかかる処理(例えば画像や動画などをアップロードする際)をする場合、画面が固まってしまったと勘違いされて閉じられたり、ボタンを何度も押されてバグを発生させてしまうこともあるかもしれない。

そこで、ローディング画面を表示して、ユーザーに「現在処理中ですよ」と知らせる必要があるのである。jQueryにローディング画像が必要のない便利な「Activity Indicator」というライブラリがあるので紹介しよう。

まずは、jQuery本体とcssを読み込む。#loadingは画面いっぱいにちょっと暗くするための箱。
<script type="text/javascript" src="/js/jquery.js"></script>
<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開始タグの先頭でid名を付けて空divを書いておく。あと、コンテンツ内でローディングを発動させる為のボタンやリンクにクラス名を付ける。
<body>
<div id="loading"></div>



<input type="submit" value="アップロード" class="loading">
bodyタグの最後あたりでjqueryライブラリを読み込んで、ちょちょいとスクリプトを書いておく。これで動作しなかったら、jqueryのバージョンをあげてみる必要がある。今回の例は「.loading」が押されたら、「#loading」を発動させるという形式。
<script type="text/javascript" src="/js/activity-indicator.min.js"></script>
<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>
この「activity-indicator.min.js」は初期状態ではgoogle chrome(グーグルクローム)で動かないので、ちょっと補正が必要。
初期→ document.styleSheets[0].insertRule(rule);
修正→ document.styleSheets[0].insertRule(rule,document.styleSheets[0].cssRules.length);
ちなみにjqueryのライブラリやスクリプトは基本的に最後の方で読み込んだほうがサイトの高速化に繋がる。最高峰のアクセス数を誇る、楽天・yahoo・youtubeのトップページのソースコードでも最後の方に多くのスクリプトを書いている。