加载 gif 图像未在 IE 和 chrome 中显示答案

【问题标题】：Loading gif image is not showing in IE and chrome加载 gif 图像未在 IE 和 chrome 中显示
【发布时间】：2012-08-10 10:07:11
【问题描述】：

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

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

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

有没有什么方法可以停止java脚本执行一毫秒，这样IE执行就会停止并显示加载图像。

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

任何帮助都是宝贵的，在此先感谢。

【问题讨论】：

我过去在 IE 中解决了这个问题，方法是将 Ajax 调用放入 setTimeout() 并延迟 1 毫秒。通常，IE 会在调用启动 Ajax 请求的超时回调之前更新页面。请注意，如果加载图像尚未在浏览器缓存中，则它可能无法在 Ajax 响应返回之前及时加载以显示。
我试过 setTimeout() 但它不起作用。
尽可能多地复制问题。它不必有任何逻辑。

标签： javascript ajax jquery

【解决方案1】：

在您的 $.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);           
    }
});

【讨论】：

【解决方案2】：

我以 Sergiu Dumitriu 的信息为基础。我将我的 async 设置为 true 并添加了

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

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

【讨论】：

【解决方案3】：

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

【讨论】：

我正在使用 jquery $.ajax() 函数。
查看如何将 ("Accept-Charset", "charset=UTF-8") 和 (Accept-Charset", "charset=UTF-8) 添加到您的通话中，只有这些语句有所不同对我来说

【解决方案4】：

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

类似：

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

然后将 img 附加到 DOM。

【讨论】：

由于我的Web应用程序完全基于JQuery，如果我使用onload函数，那么它会跳过ajax调用直到图像加载但不会停止JavaScript线程执行，这会在其他函数中产生问题。
您是否尝试使用'beforeSend'回调来显示加载图像？
是的，我已经尝试过了，但它不适用于我的 .gif 图像。
你预加载了gif图片吗？

【解决方案5】：

我也遇到过类似的情况，如果非要同步调用，浏览器会暂停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();
            }
        });
  });

【讨论】：

我试过了，但对我的情况没有帮助。因为，我的 Web 应用程序完全基于 JQuery，如果我使用了 animate 函数，那么它会跳过 ajax 调用，直到 animate 完成但没有t 停止 JavaScript 线程执行，这将在其他函数中产生问题。
@MohitPandey，如果您希望 dom 操作同步发生，您可以在 .animate 调用中添加一个选项并将队列设置为 false。这将强制动画立即开始，您可以在其中显示图像，然后完成可以进行ajax调用。您可以选择小至 1 的动画时间。有关 .animate 文档的更多详细信息：api.jquery.com/animate 但是，我强烈建议您审查应用程序的设计并使其异步以使代码更简洁。
我会试试然后告诉你。

【解决方案6】：

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

【讨论】：

我正在使用同步调用和它的必要性。网络工作者怎么样。有没有办法通过网络工作者解决这个问题。
你可以使用任何你喜欢的东西，但是如果页面在处理请求时重新加载，那么 .gif 图像将不会在 IE 和 chrome 中显示。但是你可以显示加载文本，它应该可以工作。
就我而言，整个页面不会重新加载。我只是更改 div 内容，但在同步 Ajax 调用期间不显示加载图像。

【解决方案7】：

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

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

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

【讨论】：

setTimeout 是一种解决方法，至少可以让您显示一些消息。当对某些 AJAX API 进行调用时，您需要它们按特定顺序进行同步调用是最简单的方法。使用复杂的回调也是一种选择，但它可能会变得混乱。

【解决方案8】：

我在使用 ajax 时也遇到了类似的问题，比如我在 ajax 调用期间向 UI 应用了一些样式，但这些样式并未应用于 UI，就像你告诉过的那样，如果我们发出一些警报，它将按预期工作，直到未单击 OK提醒

我猜不出它为什么会发生，但你可以使用 JQuery 来显示或隐藏正在加载.... div 希望它会工作....

【讨论】：

【解决方案9】：

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

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

【讨论】：

【解决方案10】：

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

或

你也可以使用设置超时

【讨论】：