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

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

新規登録して質問してみよう
ただいま回答率
85.48%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

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

Q&A

解決済

2回答

2717閲覧

ASP.NETでのjQueryの挙動がFireFoxなど特定のブラウザで機能しない

key634

総合スコア7

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

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

0グッド

0クリップ

投稿2018/05/08 06:21

編集2018/05/08 08:23

![イメージ説明

すみません質問失礼いたします。
ASP.NETにてWEBフォームを開発しております。
内容といたしましてはデータベースの検索などを行うものです。

ボタンクリックによりデータベースの検索を行うようにし(SQL文で抽出しテーブル形式でhtmlに表示)、検索の待機時間に
ロード待ちのくるくるの進捗インジケータのgif画像を中央に表示させるようにしました。
しかし実装してみたところ、ブラウザがクロームとIEの場合のみ表示されるのですが、その他のブラウザ
FireFoxやOperaなどでは表示されません。(検索などプログラムの実行は正常にされています。)

発生している問題・エラーメッセージ

$().htmlで画像表示させている進捗インジケータがクローム、IE以外で表示されない

jQueryのソースコード

function loading() { $('#load_image').html("<img src='画像ソース場所'>"); }

aspxのソースコード

<asp:Button ID="Btn" runat="server" Text="検索" OnClientClick="loading();" OnClick="Btn_Click" /> <div id="load_image"></div>

cssのソースコード

#load_image { position: fixed; top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); z-index: 9997; }

色々試してみたところ、上記jQueryのソースコードの3行目に

alert("");

と空のダイアログを入れてみるとなぜか画像が表示されました。当然alert文など入れたくないのでとても困っています。
すみませんが、ご助力お願いいたします。

環境

Visual Studio2012
Microsoft.NET Framework Version4.6.01055

追記

x_x様からのご指摘により、キャッシュ削除をしたところOperaに若干改善が見られました。しかし、画像が上手く表示されない(「画像」と文字が出ていたり、gifが動かなかったり)またFireFoxではいまだに非表示でした。すみませんご助力お願いいたします。

追記2

FireFoxで$('#load_image').html("<img src='画像ソース場所'>");にブレークポイントを設置してステップ実行してみたところ、直後で画像が表示され、正しく実行されました。開発ツールを終了しそのままFireFoxを閉じずにいると再現されましたが、gif画像は静止しての表示となりました。FireFoxを再起動するとまた画像は表示されなくなってしまいました。
また、スクラッチパッドにて単独実行したところ、こちらは正常に描画されました。

追記3

Operaでは正常に動作が確認できるようになりました。(原因は不明ですがキャッシュ削除の効果かもしれません。)

気になる質問をクリップする

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

x_x

2018/05/08 06:50

ChromeとOperaは基本的に同じエンジンを使っているため挙動が違うのは考えにくいです。キャッシュが残っていたりしないでしょうか?
key634

2018/05/08 06:59

画像が表示されました!すみません単純なミスでした、お手数おかけしました…。ただgif画像の動作がしないのが気になりますが、これにも原因があるのでしょうか?(クロームだと動きます)すみません度々質問してしまい。
key634

2018/05/08 07:11

すみません本文に追記しました。失礼いたしました。
x_x

2018/05/08 07:15

すぐ消えるとわかりにくいので、開発者ツールで単独で $('#load_image').html("<img src='画像ソース場所'>"); を実行してみるとどうですか?
key634

2018/05/08 07:28

FireFoxではステップ実行すると該当コード$('#load_image').html("<img src='画像ソース場所'>");直後では画像が表示されました。しかし画像は静止した状態でした。
x_x

2018/05/08 07:37

ブレークポイントを置くのではなく、単独で実行したらどうでしょうか?
key634

2018/05/08 07:44

すみませんjavascript開発に不慣れで遅くなってしまいました。スクラッチパッドにて当コードを実行したところ、正常に描画されました。
x_x

2018/05/08 07:47

ツール上から変更した場合はOperaもFirefoxもアニメ表示されるということでいいでしょうか?
key634

2018/05/08 07:53

firefoxに至ってはその通りです。ただすみません、operaの操作方法がいまいちわかっていないのでもう少し確認に時間がかかります、すみません。
退会済みユーザー

退会済みユーザー

2018/05/08 07:58

ASP.NET のタグが付いてますが ASP.NET とは直接の関係はなく、.gif 画像表示の話のように見えます。そうであれば、ASP.NET のタグは外していただけませんか?
key634

2018/05/08 08:00

すみませんタグを今外しました。大変失礼しました。
退会済みユーザー

退会済みユーザー

2018/05/08 08:01

どういう .gif 画像か分からないと話が進まないような気がします。loading gif をキーワードにググるといろいろサンプルが見つかると思いますが、それを使って話ができませんか? 回答者の方でも質問者さんと同じ問題・現象が再現できれば話が早いと思います。
x_x

2018/05/08 08:11

Operaでの開発者ツールの出し方でしょうか? Ctrl+Shift+Iです。
key634

2018/05/08 08:11

はい、今画像を追記しました。このgifは http://ajaxload.info/ というサイトにて作りました。
key634

2018/05/08 08:18

すみませんそこまでご教授していただきありがとうございます。operaでも確認できました。また、理由はわかりませんがoperaでは正常に動くようになりました。(ソースはいじっていないのでキャッシュの問題だったのでしょうか)
退会済みユーザー

退会済みユーザー

2018/05/08 08:25

解決したのであれば、どのように解決したのかを回答欄に書いてクローズしていただくようお願いします。
key634

2018/05/08 08:29

すみません、ただFireFoxに至ってまだ解決していない状況です。申し訳ないです。
退会済みユーザー

退会済みユーザー

2018/05/08 08:58

自分が Firefox 59.0.3 でこのページを見ると他のブラウザと全く同様に .gif 画像は動いてます。質問者さんがご自分の「解決していない」という Firefox でこのページを見たらどうなりますか?
key634

2018/05/08 09:02

こちらのページは見ることができました。
key634

2018/05/08 09:04

ただ大変申し訳ありません。回答してくださった方のご意見で解決策を見つけまして、事故解決に至ることになりました。解決策を書いてクローズしたいと思います。お二方には多くの時間を割いていただいて、申し訳ないことと、感謝をしています。ありがとうございました。
guest

回答2

0

画像ファイルがまだ読み込まれていないために起こっているのだと思いますが、Resource Hintsにより改善するかもしれません。
https://developer.mozilla.org/ja/docs/Web/HTTP/Link_prefetching_FAQ
https://blog.kazu69.net/2016/03/19/optimize_resources_using_resoucehint_and_preload/

ただ、この手の画像はサイズも小さいし、一か所で管理することも可能であるため、CSS内に埋め込むことで遅延なく表示できてよさそうです。

CSS内の画像埋込で高速化(Data URI)
https://qiita.com/cognitom/items/3134467210e0022f4a02

ウェブ上で簡単に変換できるツールもあります。
画像をdataURL(MIME Type + base64文字列)に変換する
http://hi0a.com/demo/img-base64-datauri/

投稿2018/05/08 08:37

x_x

総合スコア13749

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

key634

2018/05/08 09:08

大変申し訳ないのですが、自己解決してしまいました。ただ、その解決策に至ったのはx_x様のcss埋め込みという観点からでして、.htmlを使わずfadeinにてcssにて非表示からフェードインするという方法に導きました。(もうしわけありません、先読みでは解決しませんでした。) 解決方法は自己解決の箇所に詳細を書きたいと思います。 もう一方コメントして頂いた方もそうですが、x_x様には長い時間割いていただき、また回答もしていただき大変感謝しております。ありがとうございました。
x_x

2018/05/08 09:10

わたしは先読みではなく埋め込みを推奨して回答したつもりでしたが、伝わりませんでしたかね?
key634

2018/05/08 09:19

すみません大変失礼しました。先読みを試して、次にcssに至るところで別手法に気がついてしまいました。明日こちらを試してみてからこちらの質問を締めようと思います。 色々ご提示していただき大変申し訳ありませんでした。
key634

2018/05/09 00:46

すみません失礼します。試してみたところ、クロームでは確認できるのですがやはりFirefoxだと確認できませんでした。時間を割いて色々ご教授してくださり、本当にありがとうございました。
guest

0

自己解決

コメント、回答してくださった方ありがとうございました。別の方法から表現することができたのでそちらを書きたいと思います。

解決方法:jQueryにおいて.htmlで書き換えるのでなく、.fadeInにてdisplay:noneの非表示から画像を表示させる方法

変更内容

jQuery

function loading() {
$('#load_image').fadeIn("fast");
}

aspx

<asp:Button ID="Btn" runat="server" Text="検索" OnClientClick="loading();" OnClick="Btn_Click" />
<img id="load_image" src='ソースの場所'/>

css

load_image {
display: none;
position: fixed;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
z-index: 9997;
}

投稿2018/05/09 00:46

key634

総合スコア7

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問