Question

Is there a way to use jquery (or other method) to display a loading div while page loads?

I have a table that is populated using PHP/MySQL and can contain several thousand rows. This is then sorted using the tablesorter plugin for jquery. Everything works fine, however the page can sometimes take 4-5 seconds to fully load and it would be nice to display a ‘loading…’ message within a div which automatically disappears when whole table is loaded.

I have heard of loadmask plugin for jquery – would this be suitable for my needs and if not any alternative?

No AJAX calls are being made while loading this table if thats relevant.

Thanks in advance
Andy

Answer 1

I think the easiest way to accomplish this would be using AJAX. You’d need two methods (scripts). The first would load the initial page with the loading image and a bit of javascript to call the second method. The second method would return the HTML for your table and the javascript (in the body element, not the head) to invoke tablesorter. The javascript would call the second method, get the HTML, and insert it onto the page, replacing the loading message.

Example:

 <script type="text/javascript">
     $(function() {
         $.get( '/example.com/secondmethod.php', function(html) {
               $('#loadingImage').replaceWith( html );
         });
     });
 <script>

 <div id="doc">
     <img id="loadingImage" src="/example.com/images/loading.gif" alt="Loading..." />
 </div>