Question

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

进度轮是否应该立即显示，或者一旦页面模板（但不是内容）加载后我应该显示它吗？

在页面的HTML / javascript加载完成或PHP加载完成之前，我应该显示进度轮吗？

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

Answer 1

显示进度条直到，php响应（返回值可能是HTML一）未加载到javascript中。

“我应该展示进度轮直到页面的HTML / javascript已完成加载，或PHP完成时加载？“

这个方法是的

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

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



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

Answer 2

这是非常常用技术，该过程相当标准。您只想在即将发出请求时显示图形。这意味着将图形设置为在CSS中不显示任何内容。这明显优于使用JavaScript实现兼容性和性能优势。

你可以看到我在这里创建了一个加载图形，在jQuery中添加，并绑定了一个异步事件，在任意点击时发生。在建立连接之前显示图形，然后在请求完成时隐藏图形。如果响应错误，请使用完整。

<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 个答案: