显示MySQL查询的加载栏

I am pulling in thousands of records via a single query, and the page takes forever to load. I am trying to show a simple "loading" indicator while loading this in the background.

My loading div is #loadDiv and my info table is #wrapper

What I have currently that is NOT working is:

 <script>
$(function() {
  $('#loadDiv').hide();
  $('#wrapper').hide();
  $('#loadDiv').ajaxStart(function() {
    $(this).show();
  }).ajaxStop(function() {
    $('#loadDiv').hide();
  });
  $('#wrapper').fadeIn();
   });
</script>

I am not doing any AJAX calls, so this basically can't work. I am simply loading a query using a while statement. I want to show my loading div $loadDiv while the #wrapper is loading, then once the page is done loading, hide the #loadDiv, and fade in the #wrapper.

Is this possible?

Unfortunately you cannot show a loading bar if the same PHP script is making the query that is also supposed to output the HTML.

If you want to show a loading bar for your query, your program flow should be similar to something like this...

  1. HTML Page is generated and sent to the client

  2. AJAX call is made from the HTML page to a PHP script that queries the database, when the call is made, show an animated loading graphic, and remove it or display a loading complete message when the AJAX request completes (signaling that the query has finished and PHP page returned a result)

  3. Either pre format your data in your PHP script and pass back HTML to your AJAX call, or only pass the data as JSON and manipulate the data on the client side via javascript

It's mildly possible, but it's not possible to do this well. The only way you can have control over the load order of a page (meaning, "display my page layout with a loading graphic, and load the graphic, before you load the other data that's loaded by this SQL query") is by allowing the HTML page to load, and then pulling the results from the SQL select using AJAX.

Doing it the way you're requesting, your best bet (and trust me, this is not your best idea) would probably be to:

  • Hide #wrapper with CSS
  • Show #loadDiv with CSS
  • As early in the page loading sequence as possible (probably just in a script block in the head), set a javascript SetInterval'ed function that checks for something within #wrapper that shows it's finished loading (for example, you could make sure the last value of the SQL result has a particular ID, and have this SetInterval function look to see if that ID exists on the page). Once the SetInterval'ed function finds that ID, you'll know your SQL results are finished loading, and you can have the function perform your fade-in action and then cancel the Interval.

This is going to differ by browser and by the cache situation (browsers have different load orders, and caching of some elements but not others will also affect this displaying the way you hope.) So, it's not really a good option, especially considering how much better some simple AJAX would be for this situation.

Your much better option would be to create a separate page that just displays the SQL results you want, and then use AJAX to pull it into #wrapper once the main page has finished loading. It's not going to be hard at all to learn: http://api.jquery.com/jQuery.get/