I have encountered an issue with my project. I am using two webpages, webpage XXX for input and webpage YYY for output. The processing time takes approximately 2 minutes, so when I click the button on webpage XXX, it displays a white screen until the processing completes and shows webpage YYY.
How can I replace the white blank screen with a loading image that disappears once webpage YYY finishes processing? I have done some research and found this example code:
function onReady(callback) { var intervalID = window.setInterval(checkReady, 60000); function checkReady() { if (document.getElementsByTagName('body')[0] !== undefined) { window.clearInterval(intervalID); callback.call(this); } } }
The example code is from this site: http://jsfiddle.net/MrPolywhirl/cbLsc81f/
- Where should I place the code and CSS to display the loading screen? On webpage XXX or webpage YYY?
I am confused about how to implement the JavaScript in my project. Any assistance would be greatly appreciated.
Thank you in advance.
UPDATE:
This is the code snippet that requests the YYY page from XXX:
public void GenerateReport()
{
System.Collections.Specialized.NameValueCollection collections = new System.Collections.Specialized.NameValueCollection();
collections.Add("ID", Session["ID"].ToString());
string remoteUrl = "WebfrmReport.aspx";
string html = "<html><head>";
html += "</head><body onload='document.forms[0].submit()'>";
html += string.Format("<form name='PostForm' method='POST' action='{0}' style='display:none;'>", remoteUrl);
foreach (string key in collections.Keys)
{
html += string.Format("<input name='{0}' type='text' value='{1}'>", key, collections[key]);
}
html += "</form></body></html>";
Response.Clear();
Response.ContentEncoding = Encoding.GetEncoding("ISO-8859-1");
Response.HeaderEncoding = Encoding.GetEncoding("ISO-8859-1");
Response.Charset = "ISO-8859-1";
Response.Write(html);
Response.End();
}