使用谷歌浏览器的加载指示器

Question

我在使用Google Chrome或者Android（2.1）的web浏览器时遇到了问题。

我的Web应用程序在每次页面转换时调用restservices。这需要一些时间，我需要向用户提供反馈，比如一个小的“正在工作中…”弹出框。restservices是通过同步ajax请求调用的。以下是一个示例： $.ajax({ url:某个URI， async:false， beforeSend:function(){ showIndicatorDialog(); }， complete:function(){ hideIndicatorDialog(); }， success:function(response){ 成功后做一些事情； }， error:function(response){ 错误后做一些事情； }， type:'GET' });

在Firefox和Opera上运行得很好！但是当我在Chrome上访问我的Web应用程序或者使用我的Android设备时，加载指示器没有出现！似乎Google浏览器不支持同步请求。

有人知道如何解决这个问题或者知道另一个在Chrome中获取加载指示器的解决方案吗？

- bedit

Answer 1

解决方案不是使用同步请求。一般来说，不应该使用同步请求，因为它们倾向于阻塞页面上的任何其他执行内容（甚至整个浏览器用户界面），这是不好的。

- Matti Virkkunen

---

好的，你是对的。但目前这就是架构，我在不久的将来无法更改它。 :/ - bedit

@Lèse majesté：我稍微更新了一下我的帖子。我所说的同步请求是指同步XMLHttpRequests。它们与书签或其他什么都无关。 - Matti Virkkunen

好的，这样就合理多了，但也许你应该在回答中包含这一点（即永远不应使用同步的XMLHttpRequests）。 - Lèse majesté

@MattiVirkkunen，你没有资格说别人的架构烂。这对任何人都没有好处，我认为你的回应应该永久删除。显然，你在职业方面还有很多需要学习的地方。至于实际答案：如果应用程序确实需要同步处理（例如某些电子商务网站），则有一些解决方法。我目前正在使用setTimeout。这个答案有一些要点，但并不是100%的“嘿，不要这样做，你是个白痴”之类的东西……只是要知道，如果结果失败或出现问题，你可能会冻结浏览器。 - akahunahi

@sonic720：你实际上是在说，无论人们做什么都是正确的选择，人们不应该告诉他们不要这样做。这是荒谬的，我不同意。此外，我不明白“成为电子商务网站”需要同步处理，我认为架构显然存在问题。而setTimeout与请求使用完全相同的事件队列 - 我甚至不确定你想出了什么可怕的黑客攻击。 - Matti Virkkunen

Answer 2

你是说在Google Chrome（桌面版）上没有显示加载指示器，还是说Android设备的移动版Google Chrome Lite浏览器上也没有显示？如果你正在使用最新版本的jQuery，则应该在所有桌面浏览器上都能正常工作。由于移动浏览器具有截然不同的界面设计，并且不是完整的浏览器，因此许多移动浏览器的JS支持功能并不完整，所以对移动浏览器的支持并不好。

话虽如此，我还没有听说过Chrome Lite中有任何jQuery问题——安卓平台最令人印象深刻的一点就是在移动平台上包含了一个完整的浏览器。但我认为可能已经有可用或正在开发中的jQuery移动版本。所以如果其他方法都失败了，你可以尝试一下这个。

有关移动浏览器JavaScript/jQuery支持的详细信息，请参见此Google Groups帖子： http://groups.google.com/group/jquery-dev/msg/262fa7d9f3cbe96e 编辑： 虽然在执行同步请求时Chrome的UI似乎会锁定，但是只需在显示加载指示器和执行XHR之间加入稍微的延迟即可解决此问题：

function callAjax() {
    showIndicatorDialog();
    setTimeout("testAjax()",100);
}
function testAjax() {
    foo = $.ajax({
        url: "index4.htm",
        global: false,
        type: "POST",
        data: {
            id: 3
        },
        dataType: "html",
        async:false,
        success: function(msg){
            $('#response').text(msg);
        },
        complete: hideIndicatorDialog
    }).responseText;
}

我使用了POST请求来防止浏览器缓存响应，但是使用GET请求同样有效。我没有安卓手机来测试，但在Google Chrome中运行良好。

- Lèse majesté

---

是的，在谷歌Chrome桌面版和Android设备上，指示器不会显示。我使用jQuery的1.4.2版本。也许我会试试jQTouch... - bedit

@benjamin：尝试在显示加载指示器和启动同步XHR之间设置延迟。 - Lèse majesté

嗨Lèse，它使用超时功能可以工作了！感谢您的巨大努力！我不能给你点赞，因为我需要先获得15个声望值！ :/ - bedit