如何在使用 Bootstrap 4 加载页面后禁用加载器/微调器？答案

【问题标题】：How to disable loader / spinner after page load with Bootstrap 4?如何在使用 Bootstrap 4 加载页面后禁用加载器/微调器？
【发布时间】：2020-05-03 11:15:42
【问题描述】：

我用 Bootstrap 4 创建了一个带有数据表的页面。在某些情况下，该表非常大，数据检索需要几秒钟。因此我添加了一个微调器/加载器，它显示页面仍在加载。但是，当页面完全加载时，微调器不会按预期停止，我在文档中找不到如何实现这一点的说明。我是在错误地使用“div”元素还是需要 JavaScript？ - 不幸的是，我对 JavaScript 的了解为 0%。或者这是浏览器/操作系统的特定问题？（我正在使用 Firefox / Linux）。

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

    <title>Hello, Table!</title>
  </head>
  <body>
    
    <div class="container">
    
      <div class="pt-3">
				<span class="h1 mr-3">Large Table</span>

      <div class="spinner-border text-primary" role="status">
  <span class="sr-only">Loading...</span>
</div>
      </div>
    
    
    <div class="table-responsive pt-3">
 
        <table class="table table-hover">
  <thead class="thead-dark">
    <tr>
      <th scope="col">Column 1</th>
      <th scope="col">Column 2</th>
      <th scope="col">Column 3</th>
      <th scope="col">Column 4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Name 1</th>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
    </tr>
    <tr>
      <th scope="row">Name 2</th>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
    </tr>
    <tr>
      <th scope="row">Name 3</th>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
    </tr>
  </tbody>
</table>
</div>    
</div>
    
    
    
    
    
    
    
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
  </body>
    
</html>

【问题讨论】：

标签： html css beautifulsoup

【解决方案1】：

你可以使用

$(document).ready(function() {
   // executes when HTML-Document is loaded and DOM is ready
 });

或

 $(window).load(function() {
   // executes when complete page is fully loaded, including all frames, objects and images
});

或者如果你想在检查表是否存在于 DOM 之后隐藏加载器，那么你可以通过它的标签或选择器长度来检查表是否存在。

类似的东西。

var yourElement= document.getElementById("yourElement");
if(yourElement){
   // Element exists
}

通过 jQuery

if ($( "#yourElement").length) {
   // element exists
}

$(document).ready(function() {
      $('.spinner-border').hide();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

    <title>Hello, Table!</title>
  </head>
  <body>
    
    <div class="container">
    
      <div class="pt-3">
				<span class="h1 mr-3">Large Table</span>

      <div class="spinner-border text-primary" role="status">
  <span class="sr-only">Loading...</span>
</div>
      </div>
    
    
    <div class="table-responsive pt-3">
 
        <table class="table table-hover">
  <thead class="thead-dark">
    <tr>
      <th scope="col">Column 1</th>
      <th scope="col">Column 2</th>
      <th scope="col">Column 3</th>
      <th scope="col">Column 4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Name 1</th>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
    </tr>
    <tr>
      <th scope="row">Name 2</th>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
    </tr>
    <tr>
      <th scope="row">Name 3</th>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
    </tr>
  </tbody>
</table>
</div>    
</div>
    
    
    
    
    
    
    
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
  </body>
    
</html>

【讨论】：

@peter 如果这对您有帮助，请不要忘记将其标记为正确答案。
感谢您的提醒。是的，$(document).ready(function() { $('.spinner-border').hide(); }); 对我很有帮助。最好的问候。