ansaurus

Question

Answer 1

+1 A:

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>

tvanfosson 2010-05-19 11:46:28

Answer 2

A:

hey buddy,

i hope this link can be of some help to you..(since i believe that you dont want to use ajax)

http://forums.codecharge.com/posts.php?post_id=85584

thanks

Shrewd Demon 2010-05-19 11:51:36

Answer 3

A:

Don't know if this is what you are after but you could just display a that says "loading" and when the tablesort plugin in is ready. Show the table and hide the loading div. This method has some cons and pros.

Pros: 1. Real easy to implement. 2. The loading div will show until the tablesort is done. Don't know about the tablesort but since it's client code it's a big possibility that the hold up is here.

Cons: 1. If the long loading time is due to the it take the server long to respond to the request this will not help you. Then you are better of with an AJAX solution. See tvanfosson's response.

..fredrik

fredrik 2010-05-19 11:52:51

Answer 4

A:

I would try the following:

As the first child in your body, insert the div element like:

<body>
    <div id="loading">Loading...</div>
    ...

Style it appropriately like e.g.:

#loading {
   position: fixed;
   top: 1em;
   left: 1em;
   z-index: 1; /* or a larger number */
   ...
}

Then use the following jQuery:

$(document).ready(function() {
    $("#loading")[0].style.visibility = "hidden";
});

I can't test this right now, I hope it doesn't have too many bugs...

Chris Lercher 2010-05-19 11:57:05

ansaurus

tags:

views:

answers:

Page loading effect with jquery

related questions