php - How to hide whole loading process of page and show ready page to users? - Stack Overflow

admin管理员组

文章数量:1391995

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

Share Improve this question Follow edited Mar 17, 2019 at 19:41 halfer 20.4k1919 gold badges109109 silver badges202202 bronze badges asked Sep 23, 2011 at 9:41 Tural AliTural Ali 23.3k1818 gold badges8181 silver badges133133 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 6

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();
}

本文标签： phpHow to hide whole loading process of page and show ready page to usersStack Overflow