页面加载时显示进度轮

问题描述 投票:0回答:2

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

进度轮应该立即自行显示,还是应该在页面模板(但不是内容)加载后显示它?

我应该显示进度轮,直到页面的 HTML/javascript 加载完成,或者 PHP 加载完成吗?

如果您可以用原始代码展示大多数人是如何做到这一点的,那就太好了。 我正在使用 jQuery,这是一个 PHP 网站。

php jquery ajax progress-bar
2个回答
3
投票

显示进度条,直到 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();
     });

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>
© www.soinside.com 2019 - 2024. All rights reserved.