Question

嗨我想要一个简单的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浏览器。这是我的UserAgent：

Mozilla / 5.0（Linux; U; Android 4.1.2; de-de; GT-I9100 Build / JZO54K）AppleWebKit / 534.30（KHTML，类似Gecko）版本/ 4.0 Mobile Safari / 534.30

任何建议表示赞赏。

更新：设置如下所示的超时将使微调器出现。但是，微调器仅为设置超时设置动画。因此，如果连接错误并且加载将花费一些时间，则应用程序看起来没有响应。示例：http://jsbin.com/uxopuy/1，超时3秒

Answer 1

我不确定它是否会改变任何东西，但你可以尝试使用这样的东西：

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

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

我不知道为什么它没有“显示”手机上的微调器，但我不会感到惊讶，因为浏览器离开页面这么快，你没有太多时间看到微调器

Android原生浏览器中的奇怪JavaScript行为

1 个答案: