Как отключить загрузчик / спиннер после загрузки страницы с Bootstrap 4? - PullRequest
Новая
       4

Как отключить загрузчик / спиннер после загрузки страницы с Bootstrap 4?

1 голос
/ 03 мая 2020

Я создал страницу с таблицей данных с Bootstrap 4. В некоторых случаях таблица очень большая, и поиск данных занимает несколько секунд. Поэтому я добавил спиннер / загрузчик, который показывает, что страница все еще загружается. Тем не менее, спиннер не останавливается, как ожидалось, когда страница полностью загружена, и я не могу найти примечание в документации, как это реализовать. Я неправильно использую элемент "div" или мне нужно JavaScript? - К сожалению, у меня 0% знаний о JavaScript. Или это проблема браузера / операционной системы c? (Я использую 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>

1 Ответ

1 голос
/ 03 мая 2020

Вы можете использовать 

$(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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...