Question

我正在使用JQuery ajax调用向服务器发送同步调用，并希望显示当时的加载图像。

但加载图片在Firefox中可见，但在IE和Chrome中不可见。当我调试时，我发现在IE中，当我们调用java脚本时，它会停止显示浏览器中的更改，因为它会停止DOM，当调用完成时，它会显示所有更改。由于我在ajax调用中显示加载图像并在完成调用后将其删除，因此IE不会显示任何图像。

但是当我使用警告框时，它会在IE中显示加载图像，因为它会停止线程，直到我们响应它为止。

是否有任何方法可以停止java脚本执行一毫秒，以便IE执行停止并显示加载图像。

我已经尝试过jQuery的ajaxSend，ajaxComplete，ajaxStart，ajaxStop和java脚本的timer事件，但是没有得到任何解决方案。

任何帮助都是宝贵的，提前谢谢。

Answer 1

在XHR的上下文中，同步意味着浏览器会冻结，直到请求完成。如果你想要的是确保在给定时间只有一个请求正在运行，那么使用你自己的标志来表明请求正在进行中。

根据定义，请求的同步标志意味着必须停止任何其他活动。我很惊讶它甚至可以在Firefox中运行，上次我尝试过它没有用，但那是很久以前的事了。所以忘记它，没有办法让它在所有浏览器中都能运行。即使您使用setTimeout延迟请求，最多也会获得一个带有非动画gif的冻结浏览器。当用户冻结浏览器时，用户不喜欢，特别是如果请求可能需要超过一秒的时间。

不要依赖浏览器来获取安全性或正确的功能相关功能。如果客户端并行执行两个请求，您的应用程序可能会被破坏，那么您就会遇到错误。服务器端。没有什么可以阻止恶意用户使用除普通用户界面以外的其他工具发出并行请求。

Answer 2

您的问题可能是您的开场白中的“同步”部分。

异步打开连接。这会阻止浏览器锁定，它会按预期工作。（在XmlHttpRequest / activex对象上设置async = true）

Answer 3

尝试在ajax jquery调用开始时显示加载图像，并在成功事件中隐藏它

或

您也可以使用设置超时时间

Answer 4

我在使用ajax时遇到了类似的问题，比如我在ajax调用期间将一些样式应用于UI但是这些不适用于UI，就像你说的那样，如果我们发出一些警告，它将按预期工作，直到没有点击OK警报

我无法猜测它为什么会发生，但你可以使用JQuery来显示或隐藏那个Loading .... div 希望它能起作用....

Answer 5

我遇到了类似的问题，然后我使用ASP.NET中的更新面板对其进行了整理。如果您使用的是PHP或任何其他技术，那么您必须使用ajax调用。如果您进行同步通话，则不会显示加载图像。

Answer 6

我有类似的处理方式，如果你要进行同步调用，浏览器会暂停DOM操作。因此，除非绝对必要，否则请保持异步调用。

在开始ajax调用之前，有一种操作DOM并显示元素的解决方法。使用jQuery animate（），并在动画完成的回调中进行ajax调用。以下代码适用于我：

//show the loading animation div
$('#loading').show();

//call dummy animate on element, call ajax on finish handler
$('#loading').animate({
    opacity: 1
  }, 500, function() {
        //call ajax here
        var dataString = getDataString() + p + '&al=1';
        $.ajax(
        {
            type: 'GET',
            async: false,
            url: 'uldateList.php',
            data: dataString,
            dataType: 'json',
            success: function(result){
                //Do something with result
                ...
                //hide loading animation
                $('#loading').hide();
            }
        });
  });

Answer 7

您可以尝试在图像加载回调中执行ajax同步调用。

类似的东西：

var img = new Image();
img.src = "loading.gif";
img.onload = function() {
    /* ajax synch call */
}

然后将img附加到DOM。

Answer 8

你好试着像这样修改ajax调用它对我有用

    xmlHttp.open('POST', url, true);
xmlHttp.onreadystatechange = myHandlerFunction;
xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xmlHttp.setRequestHeader("Accept-Charset", "charset=UTF-8");
xmlHttp.send(query);

Answer 9

我使用了Sergiu Dumitriu的信息作为基础。我将异步设置为true并添加了

  beforeSend: function() {
    $('#Waiting').jqmShow();
  },
  complete: function() {
    $('#Waiting').jqmHide();
  }

它对我有用。基本上我创建了自己的async：false属性。

Answer 10

在$ .ajax调用中，您需要添加async：true。以下代码适用于我：

$.ajax({
    url: 'ajax_url',
    data: 'sending_data',
    type: 'POST',
    cache : false,
    async: true,
    beforeSend: function() {
        $('#id_of_element_where_loading_needed').html('html_of_loading_gif');
    },
    success: function(data) {
        $('#id_of_element_where_result_will_be_shown').html(data.body);           
    }
});

在IE和Chrome中没有显示加载的gif图像

10 个答案: