加载动画显示不出来，直到Ajax调用Safari /铬完成后， [英] Loading animation doesn't show up until after ajax call completes in Safari/Chrome
问题描述
我碰到，我一直没能找到一个解决一个问题呢。
I've run into a problem that I haven't been able to find a solution to yet.
我创建它使用AJAX来处理用户给出到后端数据库的信息资源预订申请。每当用户想要创建一个预订，他们填写与relavent信息的形式被通过AJAX发送到一个servlet处理该信息并更新数据库。因为我们已经包括了预订的重复选项有时数据库可能需要一段时间来进行更新。因此，我们实施了处理......图形，而这个servlet做它的东西来显示。
I'm creating a resource booking application which uses AJAX to process information given by the user into a back-end database. Whenever the user wants to create a booking they fill out a form with relavent information which gets sent via AJAX to a servlet that processes the information and updates the database. Because we have included a booking recurrence option sometimes the database can take a while to be updated. As such we have implemented a "processing..." graphic to be displayed while the servlet does it's thing.
我们已经实现了处理图形和AJAX调用的方式在Firefox，Opera和即一直很好，问题是用Safari和Chrome ......所以大概是与WebKit的。
The way we have implemented the processing graphic and ajax calls has worked fine in firefox, opera and ie, the problem is with safari and chrome... so probably something to do with WebKit.
在Safari /铬处理图形没有显示在网页上后，数据库已完成其工作和AJAX调用返回......打败的处理......图形的全部目的，直到
In Safari/Chrome the processing graphic doesn't show up on the page until after the database has completed its work and the ajax call returns... defeating the entire purpose of a "processing..." graphic.
有谁知道为什么图形（其插入AJAX请求被调用之前）没有出现，直到AJAX调用返回后？
Does anyone know why the graphic (which is inserted before the AJAX request gets called) doesn't show up until after the ajax call returns?
下面是我们如何实现图形和AJAX调用。这是调用这两个函数的函数来创建图形，并发出Ajax请求：
Here is how we have implemented the graphic and ajax calls. This is the function that calls both the function to create the graphic and to send out the ajax request:
/**
* Implements AJAX calls to add/remove bookings from the database
*/
function processBooking(selection, responseID, formElement, removing, fromManager, resourceType) {
if (!removing) {
purpose = formElement.purpose.value;
email = formElement.email.value;
/* These values should only be set if the user is an admin otherwise they do not exist so send in the default empty
* values to the processing servlet
*/
if (formElement.repeatEveryUnits != undefined && formElement.repeatFor != undefined && formElement.repeatForUnits != undefined)
{
repeatEvery = formElement.repeatEveryUnits.value;
repeatForAmount = formElement.repeatFor.value;
if (repeatForAmount == '') {
repeatForAmount = '0';
}
repeatForUnit = formElement.repeatForUnits.value;
}
else
{
repeatEvery = '0';
repeatForAmount = '0';
repeatForUnit = '0';
}
}
/* Function to be passed in as the callback to our asynchronous request */
callback = function() {
document.getElementById(responseID).innerHTML += '<p class="button-small" onclick="removeDiv(\'' + responseID + '\')>Clear</p>';
document.getElementById(responseID).style.padding = '0 0 5px 0';
}
/* Parameters that are to be used in our asynchronous request */
postData += parseArray(selection);
postData += '&removing=' + removing;
postData += '&availability=false';
postData += '&type=' + resourceType;
/* Play the loading graphic */
startLoading();
/* Make the call to the servlet */
response = sendAsyncRequest(url,postData,callback,false);
/* reset global variables used */
reset();
if ((!removing) || (!fromManager))
{
week = document.getElementById("selectedWeek").value;
window.location = "../../servlet/ResourceBooking?action=schedule&type=" + resourceType + "&week=" + week;
}
return response;
}
这是在code中插入图形：
This is the code that inserts the graphic:
/**
* Begins a loading animation that is to be played while the database does its work
*/
function startLoading() {
document.getElementById("container").style.opacity = "0.2";
document.getElementById("cover").style.display = "block";
var newDiv = document.createElement("div");
newDiv.setAttribute("id", "loading");
newDiv.style.height = 120 + "px";
newDiv.style.width = 350 + "px";
newDiv.innerHTML = "<div id='progress'><p id='progress'><img id='progress_image' src='/intranet/images/ajax-loader.gif' alt=''><br/><h3>Processing database...</h3></p></div>";
document.body.appendChild(newDiv);
ignoreClicks = true;
}
这是code，使XMLHtt prequest的AJAX调用：
And this is the code that makes the XMLHttpRequest for the AJAX call:
function sendAsyncRequest(servletUrl, postData, callback, async) {
try {
asyncRequest = new XMLHttpRequest();
}
catch (e) {
// Internet Explorer Browsers
try {
asyncRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch(e) {
try {
asyncRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch(e){
// Something went wrong
alert('Request Failed');
return false;
}
}
}
asyncRequest.onreadystatechange = function() {
if (asyncRequest.readyState == 4 && asyncRequest.status == 200) {
try {
callback();
}
catch (e) {
// IE fails unless we wrap the string in another element.
var childDiv = current_element.getElementsByTagName("div");
if (childDiv.length == 0) {
var wrappingDiv = document.createElement('div');
//wrappingDiv.setAttribute("id", current_element.id+"Div");
wrappingDiv.innerHTML = asyncRequest.responseText;
current_element.appendChild(wrappingDiv);
}
else {
var wrappingDiv = document.createElement('div');
//wrappingDiv.setAttribute("id", current_element.id+"Div");
wrappingDiv.innerHTML = asyncRequest.responseText;
current_element.replaceChild(childDiv[0], wrappingDiv);
//childDiv[0].innerHTML = asyncRequest.responseText;
}
}
}
};
asyncRequest.open('POST', servletUrl, async);
if (postData == null)
{
asyncRequest.send(null);
}
else
{
asyncRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
asyncRequest.setRequestHeader("Content-length", postData.length);
asyncRequest.setRequestHeader("Connection", "close");
asyncRequest.send(postData);
}
return response;
}
有没有约的WebKit，将prevent的startLoading div来动态地添加到页面的请求作出之前什么？
Is there anything about WebKit that would prevent the startLoading div to be dynamically added to the page before the request is made?
我试图注释掉请求本身（sendAsyncRequest（...））后，我们加载图像，它的图像会出现完全正常的，所以它看起来似乎是发生在它的时候，我们按照它与请求
I have tried commenting out the request itself ( sendAsyncRequest(...) ) after we load the graphic and it the graphic will appear perfectly fine, so it seems like something is happening to it when we follow it up with the request.
任何帮助是AP preciated，我不知所措......
Any help is appreciated, I'm at a loss...
克里斯汀
推荐答案
它的一个古老的线程，但就在今天我有类似的问题。也许这将帮助别人。）
Its an old thread, but just today i had similar problem. Maybe it will help someone :).
我已经在IE浏览器类似的问题 - 我有我自己的OMY装载型格，我表现出Ajax请求之前，隐藏在加载数据后。我的DIV被证明只是一小会儿（它只是闪烁），已经加载了数据之后。
I've had a similar problem in IE - i have my omy own loading type div which i show before ajax request and hide it after the data is loaded. My div was shown only for a little while (it just flickered) after the data was already loaded.
事情是这样的：
document.getElementById('pnLoaderPanel').style.display = 'block';
Task.Refresh(); //method that calls ajax
document.getElementById('pnLoaderPanel').style.display = 'none';
所以，我已经注意到，如果我把警报正确显示在div后，我的分区是可见的。我猜IE浏览器有点不刷新正确所以我所做的就是这一点，现在它的正常使用：
So I've noticed that if I put alert right after showing the div, my div is visible. I guess IE somehow did not refresh correctly so what i did was this and now its working perfectly:
document.getElementById('pnLoaderPanel').style.display = 'block';
setTimeout(Task.Refresh(), 1); //method that calls ajax
document.getElementById('pnLoaderPanel').style.display = 'none';
这篇关于加载动画显示不出来，直到Ajax调用Safari /铬完成后，的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
