jQueryタブが読み込まれる前に「読み込み中」と表示するには

Question

jQueryUIタブを使っていて、タブで読み込まれるコンテンツは別のページ上にあるため、
Ajax経由で読み込みを行っています。

ページ読み込みの間にはちょっとしたラグがあり、タブが読み込まれている部分のスクリーンがまっさらになってしまっています。

ここに「読み込み中」等のメッセージを表示するにはどうしたらいいでしょうか?

`

<script type="text/javascript"> $(function(){ $("#test").tabs(); }); </script> <div id="test"> <ul> <li><a href="test1.php">test1</a></li> <li><a href="test2.php">test2</a></li> <li><a href="test3.php">test3</a></li> </ul> </div> ` 上記のスクリプトを使っています。

spinnerオプションを使ってみましたが、私の場合はうまくいきませんでした。

どなたかアドバイスしてくれる方はいませんか?

Answer 1

ajaxStart、ajaxStop、ajaxErrorイベントを使ってみてください。

メッセージをajaxStartでポップアップし、ajaxStopとajaxErrorで隠します。

Ajaxリクエストが保留中であればいつでもポップアップできます。

$(function() { $(this).ajaxStart(function() { $("#hoge").show(); }); $(this).ajaxStop(function() { $("#hoge").hide(); }); });