I already know this solution. (transfer the slow loading page to a loading-interim-page which shows the animation and then redirects to the actual page)
But I would really like to solve this without a redirecting page. Any clue how ? The redirect will be triggered from codebehind...
Here is an example with jQuery.
http://pure-essence.net/2010/01/29/jqueryui-dialog-as-loading-screen-replace-blockui/
And one more simple
http://javascript.internet.com/css/pre-loading-message.html
You could try something like this:
<head>
...
<script type="text/javascript">
if (document.documentElement) {
document.documentElement.className = 'loading';
}
</script>
...
</head>
Stick that in your <head> tag, then add some CSS to hide everything on the page except for your loading animation. For example:
.loading > body > * {
display:none;
}
.loading body {
background:#fff url(../images/loading.gif) no-repeat 50% 50%;
}
Then add some JavaScript to clear the html tag's class name when the page has finished loading:
// Using jQuery
$(document).ready(function() {
...
$(document.documentElement).removeClass('loading');
...
});
Hope this helps.