如何在重定向页面完全加载之前显示加载屏幕图像？答案

【问题标题】：How to display a loading screen image until the redirected page loads fully?如何在重定向页面完全加载之前显示加载屏幕图像？
【发布时间】：2014-10-30 20:46:49
【问题描述】：

当页面在 asp.net 应用程序中重定向时，我使用了加载屏幕图像。我使用 html 文件作为导航的中间体。

所以首页的点击事件是这样的，

Div1.onclick = function () {
   location = "Redirect.htm?page=Default.aspx";
};

但在 Default.aspx 页面开始加载几秒钟后图像停止旋转。

这是我在 Redirect.html 中的代码，

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

<script type="text/javascript">
this.focus(); 
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>

如何使图像旋转直到页面 Default.aspx 完全加载？

任何想法都会有所帮助并非常感谢。

谢谢。

【问题讨论】：

标签： javascript c# jquery html asp.net

【解决方案1】：

Default.aspx 可以默认显示加载图像，并使用 CSS 将实际内容标记为隐藏。然后在页面加载完成时，隐藏图像并显示内容 html。通过 jquery：

$(document).ready(function () {
    $("#theloadingimagediv").hide();
    $("#thehtmlcontentdiv").show();
});

【讨论】：

【解决方案2】：

我认为你应该改变你的方法，因为如果你仔细想想，没有办法以你现在的方式实现你想要的。

浏览器正在显示 PageA。
用户点击链接。
您的脚本运行，显示加载图像。
浏览器收到链接响应，启动切换。您的脚本在此处停止。
浏览器构建页面，并且很可能，它看起来像是在流式传输它（在接收时加载）。
浏览器接收完整个页面后，就完成了。

主要问题是您的脚本所做的只是充当两个页面之间的中间人，因此您仍然会落后。

我可以提出三种解决方案：

使用 Ajax 加载页面。然后你可以显示一个图像，因为它是 ajax，所以不会被打断（甚至位置也不会改变），你会得到完美的动画。如果您对此感兴趣，还可以查看 AngularJS，这可能会有很大帮助。
例如，在您的页面上，在正文中有一个非常短的代码块，在 fake 内容块中显示图像，然后在其末尾放置一个脚本以设置为运行在正文完成加载后（jQuery 有一个功能，虽然我不记得它是什么）删除 fake content 块并显示原始的。这可能不会为您带来最佳效果，因为您无法控制浏览器决定如何显示传入的 HTML。
在您的正文上使用 iframe，并将其视为您的“原始页面”。在所有要显示加载的链接上，运行脚本以发送到原始 HTML，显示加载，更改 iframe，并设置脚本以在 iframe 的主体完成加载时停止加载图像。您必须考虑使用此方法隐藏 URL（因为用户将主要通过 iframe 浏览）的后果。

【讨论】：