ローディングアイコンの表示

質問

jQuery mobileであらかじめ読み込んであるページへ遷移する際に、
ローディングアイコンを表示する方法を教えてください。

//簡略コード
<a href="#page01">ページ1</a>
<a href="#page02">ページ2</a>
<a href="#page03">ページ3</a>

<div id="page01">
ページ1
</div>

<div id="page02">
ページ2
</div>

<div id="page03">
ページ3
</div>

回答No.2

fujillin · ベストアンサー

こんにちは。

＞あらかじめ読み込んであるページへ遷移する際に
「遷移」となっていますが、サンプルを見るとページ内リンクで表示を切替えているのではないかと想像します。
各ページに該当するdivの表示/非表示を切替えて、同じ位置に表示しているものと想像しました。
切り替え部分は既にできていて、ajax風に見せるためにローディングの画像を表示したいという意味でしょうか？

ユーザをいたずらに待たせることになるので、基本的には表示する必要はないと思いますが、考え方としては、切替える前に画像を表示させ1秒なり経ってから本来の切替えの処理を行なえばよろしいかと。

$("#loading").css("display", "block");
setTImeout(function(){
　　$("#loading").css("display", "none");
　　change(); 　　//これまでの切り替え処理
}, 1000);
みたいな感じ。

（jQuery mobileは存じませんので、jQuery風に記述してあります。記述が違う部分はmobile用に読み直してください。）

お礼

申し訳ありません。自己解決いたしました。

ページ内リンクで表示を切替えているのですが、
その切り替え処理に時間がかかるためローディング画像を表示しようと考えておりました。

ipadでの確認だったのですが、ipadではダブルタップを判定するための時間が
設けられているらしく、そのための遅延だったようです。
その判定処理をjavascriptで解除することで解決いたしました。

ご回答ありがとうございました。

回答No.1

pa_cotta

http://c-brains.jp/blog/wsg/13/02/14-163725.php

これを見て分からなければあきらめたほうがいいですね。

お礼

ご回答ありがとうございました。
解決いたしました。