Page loading effect with jquery
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 j开发者_JAVA技巧query - 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
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>
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
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
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...
加载中,请稍侯......
精彩评论