加载 gif 图像未显示在 IE 和镶边中

Loading gif image is not showing in IE and chrome

本文关键字：IE gif 图像 显示 加载      更新时间：2023-09-26

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

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

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

有没有办法停止java脚本执行一毫秒，以便IE执行停止并显示加载图像。

我已经尝试了 ajaxSend、ajaxComplete、ajaxStart、JQuery 的 ajaxStop 和 java 脚本的计时器事件，但没有得到任何解决方案。

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

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

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

永远不要依赖浏览器的安全性或正确的功能相关功能。如果客户端并行执行两个请求时应用程序可能会损坏，则服务器端存在错误。没有什么可以阻止恶意用户使用普通 UI 以外的其他工具发出并行请求。

您的问题可能是您开篇文章中的"同步"部分。

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

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

或

您也可以使用设置超时

我在使用 ajax

时也遇到了类似的问题，比如我在 ajax 调用期间将一些样式应用于 UI，但这些样式不适用于 UI，并且与您所说的相同，如果我们放置一些警报，它将按预期工作，直到没有单击确定警报

我猜不出为什么会发生这种情况，但您可以使用 JQuery 来显示或隐藏该加载....迪夫希望它能工作...

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

我也有类似的情况需要处理，如果你必须进行同步调用，浏览器将暂停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();
            }
        });
  });

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

像这样：

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

然后将 img 附加到 DOM。

嗨，

尝试像这样修改 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);

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

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

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

在 $.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);           
    }
});
相关文章：