スピナーの設定について

Ajaxの読み込み中や、<div>タグ内の画像コンテンツなど表示までそれぞれまばらに表示されてしまい、見た目が良くないのでよく見るようなスピナーを設定したいです。

初心者なもので、分からないのですが
例えば以下の様に<div>タグとその中に画像があるとします。

html
1<div id="hogehoge">
2   <img src="hoge.jpg" width="100" height="100" alt="hoge">
3   <img src="hoge2.jpg" width="100" height="100" alt="hoge">
4   <img src="hoge3.jpg" width="100" height="100" alt="hoge">
5   <img src="hoge4.jpg" width="100" height="100" alt="hoge">
6   <img src="hoge5.jpg" width="100" height="100" alt="hoge">
7</div>

このとき<div>タグ内の画像5枚が全て表示されるまでスピナーを表示したいのですが、jqueryまたはjavascriptで設定方法があれば教えて下さい。

よろしくお願い致します。

行動規範の内容に同意します

回答1件

ベストアンサー

「5枚の画像を読み込むまで」というイベントを扱うのがちょっとめんどくさそうなので、代替案で失礼します。それぞれの画像ごとにスピナーを表示するライブラリを見つけました。jQuery imgPreload

imgPreload.jsをダウンロードし、下記のコードを書けば画像の読み込み中にスピナーが表示されるそうです。

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'></script>
<script type='text/javascript' src='imgPreload.js'></script>
<script type='text/javascript'>
    $(function(){
        $('img').imgPreload()
    })
</script>

Ajaxの読み込み中は、jQueryを使っているのであればajaxStart()でAjaxの開始、/ajaxStop()Ajaxの終了が取れるので、spin.jsと組み合わせれば簡単にできます。

javascript
1// スピナー作成
2var opts = {
3   lines: 13, // 描画する線の数
4   length: 7, // 線の長さ
5   width: 4, // 線の太さ
6   radius: 10, // 内接円の大きさ
7   rotate: 0, // 回転開始のオフセット
8   color: '#efefef', // RGBカラーコード
9   speed: 0.75, // 回転の早さ
10   trail: 50, // 非アクティブ時の透明度
11   shadow: true, // 影の描画
12   hwaccel: false, // ハードウェアアクセラレーションするかどうか？
13   className: 'spinner', // スピナーに適用するCSSクラス
14   zIndex: 2e9, //  z-index (defaults to 2000000000)
15   top: 'auto', // 親要素からの位置(縦:px)
16   left: 'auto' // 親要素からの位置(横:px)
17};
18var spinner = new Spinner(opts);
19var ajax_cnt = 0; // AJAXリクエストの並行実行サポート
20 
21// AJAXリクエスト開始時に実行する関数の登録
22$(document).ajaxStart(function() {
23   $('<div id ="spinner_center" style="position:fixed;top:70px;left:49%;"></div>').appendTo('body');
24   spinner.spin($('#spinner_center')[0]);
25   ajax_cnt++;
26});
27 
28// AJAXリクエスト終了時に実行する関数の登録
29$(document).ajaxStop(function() {
30   ajax_cnt--;
31   if (ajax_cnt <= 0) {
32      spinner.stop();
33      $('#spinner_center').remove();
34      ajax_cnt = 0;
35   }
36});