質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.64%

スピナーの設定について

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 2,286

YuichiKataoka

score 214

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

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

<div id="hogehoge">
   <img src="hoge.jpg" width="100" height="100" alt="hoge">
   <img src="hoge2.jpg" width="100" height="100" alt="hoge">
   <img src="hoge3.jpg" width="100" height="100" alt="hoge">
   <img src="hoge4.jpg" width="100" height="100" alt="hoge">
   <img src="hoge5.jpg" width="100" height="100" alt="hoge">
</div>

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

よろしくお願い致します。
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

0

「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と組み合わせれば簡単にできます。

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

引用元: Show progress spinner on jQuery AJAX requests

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/08/12 00:32

    早速の回答ありがとうございました。
    Ajaxの読み込みが完了するまでというのはどのように設定すれば良いでしょうか?

    キャンセル

  • 2015/08/12 00:44

    Ajaxの読み込み完了について、spin.jsの使い方を追記しました。

    キャンセル

  • 2015/08/13 13:11

    ご丁寧にありがとうございました。これでやってみたいと思います。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.64%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる