在页面加载时显示进度轮

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

当用户等待时，我需要一个进度轮来显示大量数据库和第三方cURL查询。

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?

在页面的HTML/javascript完成加载之前，还是在PHP完成加载之前，我应该显示一个进度轮?

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.

如果您可以在原始代码中显示大多数人是如何做到这一点的，那就太棒了。我在使用jQuery，这是一个PHP站点。

2 个解决方案

#1

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

显示进度条，直到没有将php响应(返回值可能是HTML 1)加载到javascript。

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

“在页面的HTML/javascript完成加载之前，还是在PHP完成加载之前，我应该显示一个进度轮?”

Yes to this Approach

是的这种方法

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

加载完成后，使用jquery隐藏加载，并将内容放到容器类中。

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

这是一种非常常见的技术，而且这个过程相当标准。您将只希望在请求即将发出时显示图形。这意味着将图形设置为在CSS中显示none。这比出于兼容性和性能考虑而使用JavaScript要好得多。

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.

您可以在这里看到，我创建了一个加载图形，添加了jQuery，并将一个异步事件绑定到任意单击。在建立连接之前显示图形，然后在请求完成时隐藏图形。在出现响应错误时使用complete。

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

#1