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

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

ただいまの
回答率

91.34%

  • HTML

    6170questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • jQuery

    4898questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • CSS

    3874questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • Ajax

    807questions

    Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

Jquery(Ajax)でLoadingの表示がでない

解決済

回答 2

投稿 2017/12/07 11:58

  • 評価
  • クリップ 0
  • VIEW 54

SugiuraY

score 143

下記のように、非同期通信がcompleteするまでgif-load.gif(読み込み中)画像を
表示したいのですが、表示されません。
ディベロッパーツールで指定の要素(#loading)に<img src='./gif-load.gif'>要素が生成されている
ことは確認できたのですが、実際に表示上は何も出てきません。
どのような問題点が考えられますでしょうか。
不足があればお申し付け下さい。

宜しくお願い申し上げます。

<!DOCTYPE html>
<html>
<head>
<title>計算結果</title></title>
<link href="./C_image/generator/gif-load.gif" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js" type="text/javascript"></script>
</head>

<body>
<div id="ind_box" style="padding-left:20px;border:solid 1px #e0e0e0;position: absolute;left:870px;top:600px;width:300px;height:330px;font-size:13px;">
<div style="position:absolute;font-size:12px;left:5px;top:3px;"><i class="fa fa-caret-right" aria-hidden="true"></i><span>比較</span>
<div id="loading"></div>
</div>

<script type="text/javascript">

$( function(){
       $(".tfac_good").on('click',
          function() {
          $("#loading").html("<img src='./gif-load.gif'>");
             $.ajax({
                url: "ajx.php",
                type: "POST",
              data: { id:get_id,boxA:boxA,boxB:boxB,boxC:boxC,boxD:boxD,boxE:boxE,
                      Cal_1:Cal_1,Cal_2:Cal_2,Cal_3:Cal_3,Cal_4:Cal_4,
                      Pri_1:Pri_1,Pri_2:Pri_2,Pri_3:Pri_3,Pri_4:Pri_4,
                      Num_fuctor:Num_fuctor,Meth:Meth,Cal_name:Cal_name}, 
             // dataType: 'json', 
                success: function(data){
                  // alert(data);
                  $('#create_1').remove();
                  $('#ind_box').append(data);
                },
                // complete : function(data) {
                //                     $("#loading").empty();
                //                }
             });
          }
       );
    });
</body>
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

質問への追記・修正、ベストアンサー選択の依頼

  • SurferOnWww

    2017/12/07 12:02

    gif 画像がないとか、パスが違う・・・ということはないのは確認してますか?

    キャンセル

  • SugiuraY

    2017/12/07 12:04

    コメントありがとうございます。その点は確認済みです。ページソースの表示からSRC先でブラウザ上に表示されております

    キャンセル

  • x_x

    2017/12/07 12:14

    もしかしてgif-load.gifというのはスタイルシートが書かれたテキストファイルだったりしますか?

    キャンセル

  • SugiuraY

    2017/12/07 12:31

    コメント有難うございます。下記の通り誤ってimgタグではなくlinkタグに参照先を指定してしまっていました。。。お騒がせしてすみません。

    キャンセル

回答 2

checkベストアンサー

+1

<link href="./C_image/generator/gif-load.gif" rel="stylesheet" type="text/css" />

cssとしてgifファイルを呼び出しているのはおかしくないですか?
かりにそれがあっているとして

$("#loading").html("<img src='./gif-load.gif'>");

パスが違うgif-load.gifが処理されていますが、これもおかしいのでは?

投稿 2017/12/07 12:12

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2017/12/07 12:30

    コメント有難うございます。linkタグに間違って参照先を載せておりました。
    正しくは、ご指摘の通り、imgタグのsrcに記載すべき参照先でした。
    無事解決しました。有難うございます。

    キャンセル

0

httpから始まるURLで指定してみてください。

投稿 2017/12/07 12:00

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2017/12/07 12:30

    上記の通り、imgのリンク先の誤りでした。
    大変失礼致しました。
    コメント有難うございます。

    キャンセル

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

ただいまの回答率

91.34%

関連した質問

同じタグがついた質問を見る

  • HTML

    6170questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • jQuery

    4898questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • CSS

    3874questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • Ajax

    807questions

    Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。