显示动画的gif文件，直到重定向asp页面加载？

Question

When I click the redirect button, asp.net project redirect one html file And it show a loader (animated gif) to the user. 当我单击重定向按钮时，asp.net项目重定向一个html文件并向用户显示加载器（动画gif）。 Then it redirect to the particular page. 然后它重定向到特定页面。 Its works fine. 它的工作正常。

But now I not need the redirect page intermediate. 但现在我不需要重定向页面中间。 When I Click the Redirect button, it show the particular asp page, and loader (animated gif) shows center in same page untill it loads. 当我单击重定向按钮时，它显示特定的asp页面，加载器（动画gif）显示在同一页面中心，直到它加载。 After the page loaded - loader (animated gif) has to hide. 页面加载后 - 加载器（动画gif）必须隐藏。 How can I do this?. 我怎样才能做到这一点？。 Give a sample. 给一个样本。

C# Code - C＃代码 -

Response.Redirect("Redirecting.html?AvailResults.aspx");

Redirecting.html Code - Redirecting.html代码 -

<body>
<div style='position:absolute;z-index:5;top:45%;left:45%;'>
    <img id="imgAjax" alt="loading..." title="loading..." src="images/ajax-loading.gif" style="width: 100px; height: 100px" /><br /> <br />
 </div>

<script type="text/javascript">
    /* <![CDATA[ */
    this.focus(); //focus on new window

    redirect = function() {
        var querystring = window.location.search.substring(1); //first query string
        var page = querystring.substring(querystring.indexOf('=') + 1, querystring.length);
        function toPage() {
            if (page !== undefined && page.length > 1) {
                document.write('<!--[if !IE]>--><head><meta http-equiv="REFRESH" content="1;url=' + page + '" /><\/head><!--<![endif]-->');
                document.write(' \n <!--[if IE]>');
                document.write(' \n <script type="text/javascript">');
                document.write(' \n var version = parseInt(navigator.appVersion);');
                document.write(' \n if (version>=4 || window.location.replace) {');
                document.write(' \n window.location.replace("' + page + '");');
                document.write(' document.images["imgAjax"].src = "images/ajax-loading.gif"');
                document.write(' \n } else');
                document.write(' \n window.location.href="' + page + '";');
                document.write(' \n  <\/script> <![endif]-->');
            }
        }
        return {
            begin: toPage
        }
    } ();

    redirect.begin();

    /* ]]> */
</script>  
</body>

Answer 1

The problem here is you can't remove the intermediate step AND show/hide your spinner on a different url (you would have already redirected by the time it loaded). 这里的问题是你不能删除中间步骤并在不同的URL上显示/隐藏你的微调器（你可能已经加载时重定向）。 You need a page to load the ajax spinner. 您需要一个页面来加载ajax微调器。 I see two choices: 我看到两个选择：

Option 1: go back to the way you were doing it (click redirect button, go to redirect page with spinner, then redirect to the final destination). 选项1：回到你的方式（点击重定向按钮，转到带有微调器的重定向页面，然后重定向到最终目的地）。 This is similar those "You're now leaving xyz.com" splash pages that forums often use... 这类似于“你现在正在离开xyz.com”的论坛经常使用的启动页面......

Option 2: add an iFrame to your redirect page so you can both show/hide the spinner and load the destination page (in the iframe) at the same time. 选项2：向重定向页面添加iFrame，以便您可以同时显示/隐藏微调器并加载目标页面（在iframe中）。 (If you're redirecting to your own pages in an app or keeping the host the same, you should be able to avoid cross-site issues and ensure the destination pages don't contain frame-breakout scripts etc) （如果您在应用程序中重定向到自己的页面或保持主机相同，则应该能够避免跨站点问题并确保目标页面不包含帧分支脚本等）

Here's what that might look like: 这可能是这样的：

<div style='position:absolute;z-index:5;top:45%;left:45%;'>
  <img id="imgAjax" alt="loading..." title="loading..." src="images/ajax-loading.gif" style="width: 100px; height: 100px" />
</div>

<iframe src="about:blank" id="ifRedir" onload="$('#imgAjax').hide();" style="width:100%;height:100%;border:0px;"</iframe>

<script type="text/javascript">
    $(document).ready(function () {
        $('#ifRedir').attr('src', location.search.substr(1));
    });
</script>

I think it's always better for a child page in a frame to tell a parent frameholder when it's done loading (you could do this via window.onload and a "parent." call). 我认为框架中的子页面在完成加载时告诉父框架是更好的（您可以通过window.onload和“parent。”调用来执行此操作）。 Without this type of interaction the page will load (and hide the loading spinner) before all pages assets (images) are fully loaded. 如果没有这种类型的交互，页面将在所有页面资源（图像）完全加载之前加载（并隐藏加载微调器）。

You could avoid this by removing the code and instead using: 你可以通过删除代码来避免这种情况，而是使用：

<script type="text/javascript">
    $(document).ready(function () {
        $('#ifRedir').attr('src', location.search.substr(1));
        setTimeout(function () { $('#imgAjax').hide(); }, 1000);
    });
</script>

显示动画的gif文件，直到重定向asp页面加载？

问题描述

1 个解决方案

解决方案1
1 2014-02-26 05:48:06

显示动画的gif文件，直到重定向asp页面加载？

问题描述

1 个解决方案

解决方案1 1 2014-02-26 05:48:06

解决方案1
1 2014-02-26 05:48:06