Question

如何仅为表格内容制作装载程序？我在考虑这样的事情：

    <tbody id="loader">Loading...</tbody>
    <tbody id="table-content"></tbody>

将＃table-content设置为先显示无：

#table-content {
  display: none;
}

然后当我获取显示表格内容的表的数据时：

  table.style.display = 'block';
  loader.style.display = 'none';

但是，这不起作用，装载会一直存在。我还在考虑将Loading ..作为文本放在table-content中，然后在我开始获取数据时将其清空：

table.innerHTML = '';

但是，这也没有用，我想因为所有这些都是无效的html，所以我想知道我怎么能为表内容做这个，有一个gif是一个加载器？

Answer 1

你无法按照自己的方式去做，因为它是无效的HTML。这可能是一种不同的方法：

function hideMe(el) {
  el.style.display = 'none';
}

.wrapper {
  position: relative;
  min-height: 500px;
}

.loading {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: rgba(70,70,70,.5);
  color: red;
}

table {
  width: 100%;
}

<div class="wrapper">
  <div class="loading" onclick="hideMe(this)">Loading, click to hide</div>
  <table>
    <tbody>
    <tr>
      <td>col1</td>
      <td>col2</td>
      <td>col3</td>
    </tr>
    <tr>
      <td>col1</td>
      <td>col2</td>
      <td>col3</td>
    </tr>
    <tr>
      <td>col1</td>
      <td>col2</td>
      <td>col3</td>
    </tr>
    <tr>
      <td>col1</td>
      <td>col2</td>
      <td>col3</td>
    </tr>
    </tbody>
  </table>
</div>

我创建了一个具有相对位置的包装器，并设置了一个覆盖表的加载div。您可以根据需要设置样式，基本上只需要在需要加载内容时将其display样式切换为block，并在加载完成后将其设置为none。

Answer 2

您可以在position: absolute元素上使用#loader，然后在加载数据时，您可以添加新类，通过将不透明度设置为0来隐藏带有转换的加载器

setTimeout(function() {
  //After you load data
  document.querySelector('#loader').className += ' ' + 'hide'
}, 1000)

table {
  width: 200px;
  height: 200px;
  position: relative;
  border: 1px solid black;
}
#loader {
  width: 100%;
  height: 100%;
  position: absolute;
  background: lightblue;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease-in;
}
.hide {
  opacity: 0;
  visibility: hidden;
}

<table>
  <tbody id="loader"><tr><td>Loading...</td></tr></tbody>
  <tbody><tr><td>Content</td></tr></tbody>
</table>

Javascript - 表格内容的加载程序

2 个答案: