質問: ![![イメージ説明](https://teratail.storage.googleapis.com/uploads/contributed_images/40996f6f2f31d7b2d1ea3ce2330c3ebd.gif) すみません質問失礼いたします。 ASP.NETにてWEBフォームを開発しております。 内容といたしましてはデータベースの検索などを行うものです。 ボタンクリックによりデータベースの検索を行うようにし(SQL文で抽出しテーブル形式でhtmlに表示)、検索の待機時間に ロード待ちのくるくるの進捗インジケータのgif画像を中央に表示させるようにしました。 しかし実装してみたところ、ブラウザがクロームとIEの場合のみ表示されるのですが、その他のブラウザ FireFoxやOperaなどでは表示されません。(検索などプログラムの実行は正常にされています。) ### 発生している問題・エラーメッセージ ``` $().htmlで画像表示させている進捗インジケータがクローム、IE以外で表示されない ``` ### jQueryのソースコード ``` function loading() { $('#load_image').html(""); } ``` ### aspxのソースコード ``` ``` ### 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("");にブレークポイントを設置してステップ実行してみたところ、直後で画像が表示され、正しく実行されました。開発ツールを終了しそのままFireFoxを閉じずにいると再現されましたが、gif画像は静止しての表示となりました。FireFoxを再起動するとまた画像は表示されなくなってしまいました。 また、スクラッチパッドにて単独実行したところ、こちらは正常に描画されました。 ### 追記3 Operaでは正常に動作が確認できるようになりました。(原因は不明ですがキャッシュ削除の効果かもしれません。)
回答: 画像ファイルがまだ読み込まれていないために起こっているのだと思いますが、Resource Hintsにより改善するかもしれません。 ただ、この手の画像はサイズも小さいし、一か所で管理することも可能であるため、CSS内に埋め込むことで遅延なく表示できてよさそうです。 CSS内の画像埋込で高速化(Data URI) ウェブ上で簡単に変換できるツールもあります。 画像をdataURL(MIME Type + base64文字列)に変換する