In the below code you can see that I have made use of onload and onunload events in the body tag.The onload event hides the loading image and onunload event shows the loading event.
For example when user navigates from page 'a' to page 'b' . The onunload event of page 'a' is called first followed by page 'b' onload event.
<body id="MainBody" onload="init();" onunload="ShowLoading();">
<div id="loading" style="position: absolute; width: 100%; text-align: center; top: 300px;left: 10px;">
//Loading image ...<img src="../images/loading.gif" border="0" />
</div>
<script>
//Check for the browsers...var ld=(document.all) ? true : false;
var ns4=(document.layers) ? true : false;
var ns6=(document.getElementById&&!document.all) ? true : false;
var ie4=(document.all)? true : false;
if (ns4) {ld=document.loading;
}
else if (ns6)
{ ld=document.getElementById("loading").style; }
else if (ie4)
{ld=document.all.loading.style;
}
//Hide the Loading image ...function init()
{ if(ns4) { ld.visibility="hidden";}
else if(ns6||ie4)
{ ld.display="none"; }
}
//Show the loading image...function ShowLoading()
{ if(ns4) { ld.visibility="visible";}
else if(ns6||ie4)
{ ld.display="block"; }
}
</script>
</body>
Add the above code in the master page so that it follows to all the pages.
No comments:
Post a Comment