CODEWITHSUNDEEP
asp.net
humeira
humeira

Reputation: 21

How to insert page loading code on my aspx page?

I prepared a ASP.NET web site. But it contains lots of flash controls. When you enter the page, some flash controls can't load but page is opening.So flash parts are shown not well.

To solve this problem, I want to add a page loading code on the aspx page.An image or a gift is illustreted until the page fully loaded.

Please, give me a code but I can't know how I add the code to aspx page, so I need some instructions as well.

Upvotes: 2

Views: 930

Answers (1)

James Gaunt
James Gaunt

Reputation: 14783

If it's just the case you want to cover the screen while it loads then something like this should do the trick:

<script type="text/javascript">
(function()
{   
  if (window.addEventListener)
  {
    window.addEventListener("load", hide_loading_screen, false);    
  }
  else
  {
    window.attachEvent("onload", hide_loading_screen);
  }
})();

function display_loading_screen()
{
  document.getElementById("loading_screen").style.display = 'block';
}

function hide_loading_screen()
{
  document.getElementById("loading_screen").style.display = 'none';
}
</script>

<style type="text/css">
#loading_screen
{  
  display: none;
  position: absolute;
  left: 0px;
  top: 0px;
  height: 100%;
  width: 100%;
  background-color: black;
  color: white;  
  text-align: center;
  padding-top: 100px;
  z-index: 1000;
}
</style>

</head>

<body>

<div id="loading_screen">
  <h1>Loading...</h1>
  <h3>Please Wait...</h3>
</div>

<script type="text/javascript">display_loading_screen();</script>

</body>

You can change the CSS on the loading_screen div to be an image if that's what you want.

If you're using jQuery then you can replace the window.addEventListener with a $(document).ready() handler. If you're not using jQuery then you probably should be....

Upvotes: 1

Related Questions