单击按钮和页面加载后显示加载图像

本文介绍了单击按钮和页面加载后显示加载图像的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我的项目遇到问题.我有2个网页，输入的网页为xxx，输出的网页为yyy.处理时间需要2分钟，因此，当我单击网页xxx上的按钮后，它显示为白色，请等到处理完成后再显示网页yyy.

i got a problem in my project. I have 2 webpage, webpage xxx for the input and webpage yyy for the output. the processing time is taking 2 mins, so after i clicked the button on webpage xxx, it shows white, wait till the processing finish and show webpage yyy.

在如何处理yyy网页后，如何用加载图像替换白色空白并消失?我做了一些研究，示例就像这样的代码

How can i replace the white blank with loading image and gone after webpage yyy is finished processing? i've done some research and the example is like this code

function onReady(callback) {
var intervalID = window.setInterval(checkReady, 60000);

function checkReady() {
if (document.getElementsByTagName('body')[0] !== undefined) {
    window.clearInterval(intervalID);
    callback.call(this);
       }
   }
}

该示例来自此站点 http://jsfiddle.net/MrPolywhirl/cbLsc81f/

在何处放置代码和CSS以显示加载屏幕?是在网页xxx还是网页yyy上?

我对如何将js实现到我的项目感到困惑.我需要你的帮助

I confused on how implement the js to my project. I need your help

谢谢.

更新.

此代码是我如何从xxx请求yyy页面

this code is how i request 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();
    }

推荐答案

尝试一下:

<div class="ui-widget-overlay">
    <div id="loadingDivId">
        <img src="~/Content/Images/loading.gif" />
    </div>
</div>

function DisablePage(){
$('.ui-widget-overlay').css('height'，'100％');
}
function EnablePage(){
$('.ui-widget-overlay').css('height'，'0％');
}
$(document).ajaxStart(function(){
DisablePage();
});
$(document).ajaxStop(function(){
EnablePage();
重定向到yyy
});
function GenerarteReport(){
var url = urlHelper.CommonHelper("，"Home"，"GenerateReport");
$.ajax({
url:url，
dataType:"json"，
ype:获取"，
contentType:'application/json;charset = utf-8'，
async:true，
processData:false，
cache:false，
成功:函数(数据){
if(data.success)
alert("success");
else
alert(不成功")
}
});
}

function DisablePage() {
$('.ui-widget-overlay').css('height', '100%');
}
function EnablePage() {
$('.ui-widget-overlay').css('height', '0%');
}
$(document).ajaxStart(function () {
DisablePage();
});
$(document).ajaxStop(function () {
EnablePage();
Redirect to yyy
});
function GenerarteReport() {
var url = urlHelper.CommonHelper("", "Home", "GenerateReport");
$.ajax({
url: url,
dataType: "json",
ype: "GET",
contentType: 'application/json; charset=utf-8',
async: true,
processData: false,
cache: false,
success: function (data) {
if(data.success)
alert("success");
else
alert("not success")
}
});
}

公共JsonResult 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();
    return Json(new { success = true }, JsonRequestBehavior.AllowGet);
}

这篇关于单击按钮和页面加载后显示加载图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！