jQueryにてボタンを押したら読み込み中にローディング画面表示

レポート処理や何百レコードのデータ更新処理など、重たくなる処理に

ローディング画面表示はひじょうに役立つと思います。

そこで便利なjQueryのライブラリの紹介です。


Activity Indicator



デモやライブラリはこちら

では早速簡単なデモを作成します。


まず、jQueryとライブラリを読み込み。(ここは各環境によって変更してください。)


<script src="/js/jquery-1.7.1.js" type="text/javascript"></script>
<script src="/js/jquery.activity-indicator-1.0.0.min.js" type="text/javascript"></script>


そしてローディング画面のcssを設定。


#indicator-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;
}


ローディング処理を行う関数をjavascriptにて作成します。


function do_indicator(){
    $('#indicator-loading').show().activity({
        segments:12,
        width:12,
        space:6,
        length:28,
        color:'#fff',
        speed:1.5
    });
}


そしてbodyタグのidにindicator-loadingを指定。
※body開始および終了タグの前後をdivなどで区切ってidを付与してもいいでしょう。


<bod id="indicator-loading">
コンテンツ表示
</body>


最後に、aタグなどに上で作成したローディング関数を読み込みます。


<a onClick="javascript:do_indicator();">表示</a>


どうでしたか?ローディング画面が表示されたかと思います。

今回は簡単なデモでしたが、アレンジ頂ければいろいろ使える技になると思います。


ちなみに、activity-indicator.min.jsについては、

初期状態では、chromeに対応していない為

以下の通り修正。(こちらを参考)


初期→ document.styleSheets[0].insertRule(rule);
修正→ document.styleSheets[0].insertRule(rule,document.styleSheets[0].cssRules.length);


コメントを残す




Menu

HOME

 TOP