1

こんにちは、一方の画像が非表示になり、もう一方の画像が表示される単純な 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 秒

4

1 に答える 1

2

何か変わるかどうかはわかりませんが、次のようなものを試してみてください。

$("a").click(function(e) {
    e.preventDefault();
    var $this = $(this);
    $("#reload").hide();
    $("#loading").show();
    setTimeout(function () {
        window.location.href = $this.attr("href");
    }, 500);
});

これは、実際に移動する前に 0.5 秒の遅延を追加するだけです。私には、ページを離れるときにスピナーを表示するのに役立つかもしれません。

携帯電話でスピナーが「表示」されない理由はわかりませんが、ブラウザがページを離れるのが非常に速く、スピナーを見る時間があまりないためだとしても驚かないでしょう。

于 2013-04-19T13:53:49.347 に答える