こんにちは、一方の画像が非表示になり、もう一方の画像が表示される単純な onclick イベントが必要です。ここにサンプルがあります: http://jsbin.com/abezob/1
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"> </script>
</head>
<body style="background-color: #ccc;">
<div id="reload" style="display: block">
<img width="24" height="24" src="http://info.kicktipp.de/img/mobil/reload.png" alt="reload" />
</div>
<div id="loading" style="display: none">
<img width="24" height="24" src="http://info.kicktipp.de/img/mobil/loading.gif" alt="loading" />
</div>
<p>
<a href="http://www.google.de/">Link to Google</a>
</p>
<script type="text/javascript">
$("a").click(function() {
$("#reload").hide();
$("#loading").show();
});
</script>
</body></html>
デバイスにスピナーが表示されません。もちろん、ページの読み込み中に表示したいです。サンプルは、Firefox、Chrome、および Safari では問題なく動作しますが、ネイティブの Android 4.1.2 ブラウザでは動作しません。ここに私のユーザーエージェントがあります:
Mozilla/5.0 (Linux; U; Android 4.1.2; de-de; GT-I9100 Build/JZO54K) AppleWebKit/534.30 (Gecko のような KHTML) バージョン/4.0 Mobile Safari/534.30
任意の提案をいただければ幸いです。
更新: 以下に示すようにタイムアウトを設定すると、スピナーが表示されます。ただし、スピナーは設定されたタイムアウトの間だけアニメーション化されます。そのため、接続が悪く、読み込みに時間がかかる場合、アプリは応答していないように見えます。サンプル: http://jsbin.com/uxopuy/1タイムアウト 3 秒