My intention is to display a .gif image while the page is loading, however, currently the .gif image only appears after half of the page has loaded.
I would like the .gif image to be displayed before the actual page content loads, or at least as soon as the page layout starts to show.
.HTML code
.Head
<head>
<style type="text/css">
div.loading
{
filter: Alpha(Opacity=40);
-moz-opacity: 0.7;
opacity: 0.7;
width: 100%;
height: 100%;
background-color: #ffffff;
position: fixed;
z-index: 500;
top: 0px;
left: 0px;
display: none;
}
</style>
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
// executes when HTML-Document is loaded and DOM is ready
$('#loading').fadeIn();
$("#index").load("index.aspx");
});
$(window).load(function () {
$('#loading').fadeOut();
});
</script>
.body
<body>
<div id="loading" class="loading">
<img src="data:image/gif;base64,R0lGODlhEAAQAPQAAP///wAAAPDw8IqKiuDg4EZGRnp6egAAAFhYWCQkJKysrL6+vhQUFJycnAQEBDY2NmhoaAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAAFdyAgAgIJIeWoAkRCCMdBkKtIHIngyMKsErPBYbADpkSCwhDmQCBethRB6Vj4kFCkQPG4IlWDgrNRIwnO4UKBXDufzQvDMaoSDBgFb886MiQadgNABAokfCwzBA8LCg0Egl8jAggGAA1kBIA1BAYzlyILczULC...
alt="Loading" class="imggif" align="middle" style="position: absolute; top:40%; left:50%; z-index: auto;" />
</div>
</body>