可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

I need a progress wheel to show while a lot of database and 3rd Party cURL queries are being made while the user waits.

Should the progress wheel show by itself right away, or should I show it once the page template (but not content) has loaded in?

Should I show a progress wheel until the page's HTML/javascript is done loading, or when the PHP is done loading?

If you could show in raw code how most people do this, that'd be great. I'm using jQuery and this is a PHP site.

回答1:

show progress bar until, php response(returned value may be HTML one) is not loaded into javascript.

"Should I show a progress wheel until the page's HTML/javascript is done loading, or when the PHP is done loading?"

Yes to this Approach

Once loading is complete, hide loading using jquery and put the content in to container class.

<div class="loading">
</div>
<div id="container">
</div>



$('.loading')
    .hide()  // hide it initially
    .ajaxStart(function() {
        $(this).show();
    })
    .ajaxStop(function() {
        $(this).hide();
    });

回答2:

This is a very common technique and the process is fairly standard. You'll want to show the graphic only when a request is about to be made. This means setting the graphic to display none in your CSS. This is significantly better than using JavaScript for compatiblity and percieved performance reasons.

You can see here I've created a loading graphic, added in jQuery, and bound an async event to occur on an arbitrary click. The graphic is shown before the connection is made and then hidden when the request is completed. You use complete in case the response errors out.

<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>