Geek Answers Handbook

Show progress wheel when loading page

I need to spin the progress wheel while a lot of database queries and third-party cURL are being executed while the user is waiting.

Should the progress wheel show on its own, or should I show it as soon as the page template (but not the content) has loaded?

Should I show the progress wheel until the HTML / javascript page is loaded, or when the PHP download is complete?

If you can show in raw code how most people do it, that would be great. I am using jQuery and this is a PHP site.

+6
jquery ajax php progress-bar
source share
2 answers

Show a progress bar until a php response is received (the return value may be HTML code). javascript is not loading.

"Should I show the progress wheel while the HTML / javascript page is loading, or when PHP is loading?"

Yes to this approach

Once the download is complete, hide the download using jquery and put the contents in a container class.

<div class="loading"> </div> <div id="container"> </div> $('.loading') .hide() // hide it initially .ajaxStart(function() { $(this).show(); }) .ajaxStop(function() { $(this).hide(); });
+3
source share

This is a very common method, and the process is fairly standard. You want to show the schedule only when the request is made. This means that the graphic is not displayed in your CSS. This is significantly better than using JavaScript for compatibility and in terms of performance.

Here you can see the loading graphics added in jQuery and associate an asynchronous event with an arbitrary click. Graphics are displayed before the connection is completed, and then hidden when the request is completed. You use full if there are no response errors.

 <head> <style> .slider { display: none; }</style> </head> <body> <div class="slider"><img src="someslidergraphic.gif"></div> <script src="http://code.jquery.com/jquery.js"></script> <script> jQuery(function($) { // The animation slider cached for readability/performance var slider = $(".slider"); // Arbitrary event $("body").bind('click', function() { // Show graphic before ajax slider.show(); // Fetch content from PHP $.ajax({ // Setings ... 'complete': function() { // Hide during complete slider.hide(); // Rest of code after request ... } }); }); </script> </body>
+2
source share

More articles:


All Articles