javascript 加载 gif 图像未在 IE 和 chrome 中显示
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11946828/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Loading gif image is not showing in IE and chrome
提问by Mohit Pandey
I am using JQuery ajax call for sending synchronized call to server and want to display a loading image for that time.
我正在使用 JQuery ajax 调用向服务器发送同步调用，并希望显示当时的加载图像。
But loading image is visible in Firefox but not in IE and chrome. When i debug, i found that in IE, when we call java script, it stop showing changes in browser as it halts DOM and when the call is completed, it then shows all the changes. Since i shows the loading image on ajax call and remove it after completing the call, the IE doe not display any image.
但是加载图像在 Firefox 中可见，但在 IE 和 chrome 中不可见。当我调试时，我发现在 IE 中，当我们调用 java 脚本时，它停止显示浏览器中的更改，因为它停止了 DOM，当调用完成时，它会显示所有更改。由于我在 ajax 调用中显示加载图像并在完成调用后将其删除，因此 IE 不显示任何图像。
But when i use alert box,it shows the loading image in IE as it stop the thread until we response to it.
但是当我使用警告框时，它会在 IE 中显示加载图像，因为它会停止线程，直到我们响应它。
Is there any method to stop java script execution for a millisecond such that IE execution halts and loading image is shown.
是否有任何方法可以停止 Java 脚本执行一毫秒，以便 IE 执行停止并显示加载图像。
I already tried ajaxSend, ajaxComplete, ajaxStart, ajaxStop of JQuery and timer event of java script, but does not get any solution.
我已经尝试了JQuery的ajaxSend、ajaxComplete、ajaxStart、ajaxStop和java脚本的定时器事件，但是没有得到任何解决方案。
Any help is precious, thanks in advance.
任何帮助都是宝贵的，提前致谢。
采纳答案by Sergiu Dumitriu
In the context of XHR, synchronouslymeans just that the browser freezes until the request is complete. If what you want is to make sure only one request is running at a given time, then use your own flag to indicate that a request is in progress.
在 XHR 的上下文中，同步意味着浏览器冻结，直到请求完成。如果您想要确保在给定时间只有一个请求正在运行，那么使用您自己的标志来指示一个请求正在进行中。
By definition, the synchronous flag of a request means that any other activity must stop. I'm surprised that it even works in Firefox, last time I tried that it didn't work, but that was a long time ago. So forget about it, there's no way to make it work in all browsers. Even if you delay the request using a setTimeout, at best you'll get a frozen browser with a non-animated gif. And users don't like when you freeze their browser, especially if the request might take more than a fraction of a second.
根据定义，请求的同步标志意味着任何其他活动都必须停止。我很惊讶它甚至可以在 Firefox 中运行，上次我尝试它不起作用，但那是很久以前的事了。所以忘掉它吧，没有办法让它在所有浏览器中都能工作。即使您使用 延迟请求setTimeout，充其量您也会得到一个带有非动画 gif 的冻结浏览器。并且用户不喜欢你冻结他们的浏览器，特别是如果请求可能需要超过几分之一秒。
Don't ever depend on the browser for security or correct functionality related features.If your application might get broken if a client does two requests in parallel, then you have a bug on the server side. There's nothing that prevents a malicious user from making parallel requests using other tools than the normal UI.
永远不要依赖浏览器来确保安全性或正确的功能相关特性。如果客户端并行执行两个请求，您的应用程序可能会崩溃，那么您在服务器端就有了错误。没有什么可以阻止恶意用户使用普通 UI 之外的其他工具发出并行请求。
回答by SchizoDuckie
You problem is probably the 'synchronized' part in your opening post.
您的问题可能是您的开篇帖子中的“同步”部分。
Open the connection asynchronously. That stops the browser from locking up, and it will work as you expect. (set async = true on your XmlHttpRequest / activex object)
异步打开连接。这会阻止浏览器锁定，它会按您的预期工作。（在您的 XmlHttpRequest / activex 对象上设置 async = true）
回答by Kamal Pundir
I also faced similar problem while working with ajax like i applied some styles to UI during ajax call but these are not applied to UI and same as you told that if we put some alert it will work as expected until OK is not clicked for alert
我在使用 ajax 时也遇到了类似的问题，就像我在 ajax 调用期间将一些样式应用到 UI 中，但这些样式不适用于 UI，正如您所说，如果我们放置一些警报，它将按预期工作，直到未单击“确定”以发出警报
I can't guess why it happening but you can use JQuery to show or Hide that Loading.... div Hope it will work....
我无法猜测它为什么会发生，但您可以使用 JQuery 来显示或隐藏该加载.... div 希望它会起作用....
回答by rahul
try to shows the loading image at the start of your ajax jquery call and hide it on success event
尝试在 ajax jquery 调用开始时显示加载图像并在成功事件中隐藏它
or
或者
you can use set time out also
您也可以使用设置超时
回答by Anshuman Jasrotia
I had a similar problem and then I sorted it out by using the Update Panel in ASP.NET. If you are using PHP or any other technology then you have to use ajax call. If you do synchronized call then the Loading image will not be shown.
我有一个类似的问题，然后我通过使用 ASP.NET 中的更新面板来解决它。如果您使用 PHP 或任何其他技术，那么您必须使用 ajax 调用。如果您进行同步调用，则不会显示加载图像。
回答by Rohit
I have had similar situation to deal with, if you have to make the synchronous call, browser will suspend the DOM manipulation. So unless absolutely necessary, keep with the async calls.
我也遇到过类似的情况，如果非要同步调用，浏览器会挂起DOM操作。因此，除非绝对必要，否则请保持异步调用。
There is a workaround for manipulating the DOM and show an element before starting the ajax call. Use jQuery animate(), and make the ajax call in the callback for animation complete. Following code works for me:
在开始 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();
}
});
});
回答by Davide Ungari
You can try to execute the ajax synchronous call in the image load callback.
可以尝试在图片加载回调中执行ajax同步调用。
Something like:
就像是：
var img = new Image();
img.src = "loading.gif";
img.onload = function() {
/* ajax synch call */
}
Then append img to DOM.
然后将 img 附加到 DOM。
回答by Kamal Pundir
Hi try to modify ajax call like this its works for me
嗨，尝试像这样修改 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);
回答by Caner Akdeniz
I used Sergiu Dumitriu's information as base. I set my async to true and added
我使用 Sergiu Dumitriu 的信息作为基础。我将异步设置为 true 并添加了
beforeSend: function() {
$('#Waiting').jqmShow();
},
complete: function() {
$('#Waiting').jqmHide();
}
And it worked for me. Basically i created my own async:false attribute.
它对我有用。基本上我创建了自己的 async:false 属性。
回答by Oleg Sapishchuk
In your $.ajax call you need to add async: true. Following code works for me:
在您的 $.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);
}
});
