Question

我在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完全加载之前使图像旋转？

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

感谢。

Answer 1

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

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

Answer 2

我认为你应该改变你的方法，因为如果你考虑一下，就没有办法达到你想要的方式。

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

主要问题是你的所有剧本都在作为两个页面之间的中间人，所以你仍然会落后。

我可以建议三种解决方案：

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

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

2 个答案: