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 (KHTML, like Gecko) Version/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);
});

所有这一切都是在实际导航之前添加半秒延迟。对我来说，这可能有助于在离开页面时显示微调器。

我不知道为什么它没有在您的手机上“显示”微调器，但如果是因为浏览器很快离开页面并且您没有太多时间查看微调器，我不会感到惊讶。

于 2013-04-19T13:53:49.347 回答