I'm having following problem: my PHP page generates navigation menus from db like <ul> menus then with the help of JS shows it like multi-level menu. The problem is, it shows whole loading process. At first user sees something like that:

Then

How to hide whole loading process of page, or is there any other solution for this issue?

I'm having following problem: my PHP page generates navigation menus from db like <ul> menus then with the help of JS shows it like multi-level menu. The problem is, it shows whole loading process. At first user sees something like that:

Then

How to hide whole loading process of page, or is there any other solution for this issue?

• php
• javascript
• jquery
• mysql

3 Answers 3

hide it in css,

#loading {
  display: block;
  background: url(loading.gif) no-repeat center center;
}
#container {
  display: none;
}

and, in javascript show it again (this code uses jquery)

$(function(){
    $('#loading').fadeOut(250, function(){
        $('#container').show();
    });
});

of course you can do this like anyhow you want, hide and show anything in css, then on document ready, switch it over to the content. by hiding the loading div, and showing the content.

Set the style on display:none; until your page is pletely loaded.

Generally this is done by showing/hiding a div or two over the top of your content. You can get a fancy loading gif from http://www.ajaxload.info/ to get you started. Then you'll want to place a DIV on your page:

<div id="loading">
  <p><img src="loading.gif" /> Please Wait</p>
</div>

You'll want this hidden by default, so you'd need to add this CSS:

#loading { display:none; }

You'd also want to setup the display for this too:

#loading { display:none; position:fixed; left:0; top:0; width:100%; height:100%;
           background-image:url("transparentbg.png"); }
#loading img {position: absolute; left:50%; top:50%}

The file transparentbg.png would be a 25x25 black PNG set to about 80% opaque. Next you would need a way to show and hide this with jQuery:

function showLoading() {
  $("#loading").show();
}

function hideLoading() {
  $("#loading").hide();
}