How to display a loading screen image until the redirected page loads fully?
Question
I have used a loading screen image while the page is redirected in an asp.net application. I am using an html file as an intermediate for the navigation.
So the click event in home page is like this,
Div1.onclick = function () {
location = "Redirect.htm?page=Default.aspx";
};
But the image stops spinning after a few seconds when the Default.aspx page starts loading.
Here is my code in 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>
How can I make the image spin until the page Default.aspx is fully loaded?
Any ideas will be helpful and greatly appreciated.
Thanks.
2 answers
solution1
0 2014-10-30 22:31:26
Default.aspx could show the loading image by default and use CSS to mark the actual content as hidden. Then on page load complete, hide the image and reveal the content html. Via jquery:
$(document).ready(function () {
$("#theloadingimagediv").hide();
$("#thehtmlcontentdiv").show();
});
solution2
0 2014-10-30 22:49:56
I think you should change your approach, because if you think about it, there's no way to achieve what you want the way you're doing it.
- Browser is showing PageA .
- User clicks a link.
- Your script runs, display the loading image.
- Browser receives the link response, starts the switch. Your script stops here .
- Browser builds up the page, and most likely, it looks like he's streaming it (loading as it receives).
- After the browser finishes receiving the entire page, it's done.
The main issue is that all your script is doing is acting as an intermediate between the two pages, so you'll still be lagging behind.
I can suggest three solutions:
Use Ajax to load the page. Then you could display an image and since it's ajax, nothing would be interrupted (nor even the location would change) and you'll get the perfect animation for it. If you're interested in this, you can also check up AngularJS which might help tremendously.
On your pages, have a really short block of code in the body displaying the image in a fake content block for example, and put a script in the end of it set to run after the body's done loading (jQuery has a function for this, though I don't remember what was it) to remove the fake content block and display the original one. This probably wouldn't get you the best effects because you can't control how the browser decides to show the incoming HTML.
Use an iframe on your body and think of it as your "original page". And on all links you want to display the loading, run a script to send to the original HTML, display the loading, change the iframe, and set a script to stop the loading image when the iframe's body is done loading. You'll have to think of the consequences of hiding the URL (since the user will be mainly browsing through the iframe) with this method.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.