在单击html loader时重新出现并消失

Question

我下面的代码包含一个HTML tab，其中填充了一些动态创建的DOM elements。目前，animation loader中的内容已完全加载后，disappears中的标签tab内。{p1

我有一个button that repopulate's my tab，我要完成的工作是，当我单击按钮时，选项卡中的内容将被清除，并且加载器将重新出现，并且在选项卡中重新填充新数据后，加载程序将消失。

是否有一种简单的方法来完成此操作，我目前在下面尝试的方法似乎不起作用。我添加了一些我在代码中尝试过的评论 任何帮助将不胜感激，谢谢。

var personArr = [];
var person = {
  ["first-Name"]: "John",
  ["last-Name"]: "Doe",
  ["age"]: 21,
  ["person-desc"]: "Bacon ipsum dolor amet short loin doner tail meatloaf hamburger jerky boudin picanha shankle turducken prosciutto cow kielbasa tenderloin."
};
var person2 = {
  ["first-Name"]: "Paul",
  ["last-Name"]: "Logan",
  ["age"]: 22,
  ["person-desc"]: "Bacon ipsum dolor amet short loin doner tail meatloaf hamburger jerky boudin picanha shankle turducken prosciutto cow kielbasa tenderloin. "
};
var person3 = {
  ["first-Name"]: "Sean",
  ["last-Name"]: "Kim",
  ["age"]: 32,
  ["person-desc"]: "Bacon ipsum dolor amet short loin doner tail meatloaf hamburger jerky boudin picanha shankle turducken prosciutto cow kielbasa tenderloin."
};
var person4 = {
  ["first-Name"]: "Ken",
  ["last-Name"]: "Chow",
  ["age"]: 12,
  ["person-desc"]: "Bacon ipsum dolor amet short loin doner tail meatloaf hamburger jerky boudin picanha shankle turducken prosciutto cow kielbasa tenderloin."
};
personArr.push(person, person2, person3, person4);

var parent = document.getElementsByClassName('line1')[0];
var frag = document.createDocumentFragment();

personArr.forEach((person, i) => {
  var name = document.createElement('h4');
  var desc = document.createElement('p');
  var button = document.createElement('div');

  name.textContent = `${person['first-Name']} ${person['last-Name']}`;
  desc.textContent = ` ${person['person-desc']}`;
  frag.appendChild(name);
  frag.appendChild(desc);

});
parent.appendChild(frag);
loader.style.display = 'none'; // This makes the loader disappear once content is loaded.

function updateTab() {
  var anotherArr = [];
  var person5 = {
    ["first-Name"]: "Jun",
    ["last-Name"]: "Kim",
    ["age"]: 18,
    ["person-desc"]: "Bacon ipsum dolor amet short loin doner tail meatloaf hamburger jerky boudin picanha shankle turducken prosciutto cow kielbasa tenderloin."
  };
  var person6 = {
    ["first-Name"]: "Scooby",
    ["last-Name"]: "Doo",
    ["age"]: 18,
    ["person-desc"]: "Bacon ipsum dolor amet short loin doner tail meatloaf hamburger jerky boudin picanha shankle turducken prosciutto cow kielbasa tenderloin. "
  };
  var person7 = {
    ["first-Name"]: "Seiya",
    ["last-Name"]: "Shun",
    ["age"]: 18,
    ["person-desc"]: "Bacon ipsum dolor amet short loin doner tail meatloaf hamburger jerky boudin picanha shankle turducken prosciutto cow kielbasa tenderloin."
  };
  var person8 = {
    ["first-Name"]: "Ikki",
    ["last-Name"]: "Hyuga",
    ["age"]: 18,
    ["person-desc"]: "Bacon ipsum dolor amet short loin doner tail meatloaf hamburger jerky boudin picanha shankle turducken prosciutto cow kielbasa tenderloin."
  };
  anotherArr.push(person5, person6, person7, person8);

  var parent = document.getElementsByClassName('line1')[0];
  var frag = document.createDocumentFragment();

  anotherArr.forEach((person, i) => {
    var name = document.createElement('h4');
    var desc = document.createElement('p');
    var button = document.createElement('div');
    name.className = "lol";
    name.textContent = `${person['first-Name']} ${person['last-Name']}`;
    desc.textContent = ` ${person['person-desc']}`;
    frag.appendChild(name);
    frag.appendChild(desc);

  });
  loader.style.display = 'block'; // Trying to make loader reappear 
  parent.innerHTML = ""; 
  parent.appendChild(frag);
  loader.style.display = 'none'; // Disappear again after content is loaded
}


function openCity(evt, cityName) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementById(cityName).style.display = "block";
  evt.currentTarget.className += " active";
}
document.getElementById("defaultOpen").click();

body {
  font-family: Arial;
}

.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}

.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;
}

.tab button:hover {
  background-color: #ddd;
}

.tab button.active {
  background-color: #ccc;
}

.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}

.line1 {
  display: inline-block;
}

.size {
  width: 50%;
}

a.morelink {
  text-decoration: none;
  outline: none;
}

.morecontent span {
  display: none;
}

.lol {
  color: lime;
  font-weight: bold;
}

.loader {
  border: 10px solid #f3f3f3;
  border-radius: 50%;
  border-top: 10px solid #05788C;
  border-bottom: 10px solid #05788C;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
  margin: auto;
  margin-top: 30px;
  margin-bottom: 30px;
}

@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>


</head>

<body>
  <div class="size">
    <div class="tab">
      <button class="tablinks" onclick="openCity(event, 'People')" id="defaultOpen">People</button>
    </div>
    <div id="People" class="tabcontent">
      <!-------------------This is my Loader--------------------->
      <div id="loader" class="loader"></div>
      <!-------------------This is my Loader--------------------->
      <div class="line1">
      </div>
    </div>
  </div>
  <button type="button" onclick="updateTab()">Update Data!</button>


</body>

</html>

Answer 1

失踪是

loader.style.display ='无';

还使用超时功能。使用以下脚本。

<script>
$( document ).ready(function() {
  console.log( "doc ready!" );
  var personArr = [];
  var person = {
    ["first-Name"]: "John",
    ["last-Name"]: "Doe",
    ["age"]: 21,
    ["person-desc"]: "Bacon ipsum dolor amet short loin doner tail meatloaf hamburger jerky boudin picanha shankle turducken prosciutto cow kielbasa tenderloin."
  };
  var person2 = {
    ["first-Name"]: "Paul",
    ["last-Name"]: "Logan",
    ["age"]: 22,
    ["person-desc"]: "Bacon ipsum dolor amet short loin doner tail meatloaf hamburger jerky boudin picanha shankle turducken prosciutto cow kielbasa tenderloin. "
  };
  var person3 = {
    ["first-Name"]: "Sean",
    ["last-Name"]: "Kim",
    ["age"]: 32,
    ["person-desc"]: "Bacon ipsum dolor amet short loin doner tail meatloaf hamburger jerky boudin picanha shankle turducken prosciutto cow kielbasa tenderloin."
  };
  var person4 = {
    ["first-Name"]: "Ken",
    ["last-Name"]: "Chow",
    ["age"]: 12,
    ["person-desc"]: "Bacon ipsum dolor amet short loin doner tail meatloaf hamburger jerky boudin picanha shankle turducken prosciutto cow kielbasa tenderloin."
  };
  personArr.push(person, person2, person3, person4);

  var parent = document.getElementsByClassName('line1')[0];
  var frag = document.createDocumentFragment();

  personArr.forEach((person, i) => {
    var name = document.createElement('h4');
    var desc = document.createElement('p');
    var button = document.createElement('div');

    name.textContent = `${person['first-Name']} ${person['last-Name']}`;
    desc.textContent = ` ${person['person-desc']}`;
    frag.appendChild(name);
    frag.appendChild(desc);

  });
  parent.appendChild(frag);
  loader.style.display = 'none'; // This makes the loader disappear once content is loaded.




});




      function updateTab() {
        var anotherArr = [];
        var person5 = {
          ["first-Name"]: "Jun",
          ["last-Name"]: "Kim",
          ["age"]: 18,
          ["person-desc"]: "Bacon ipsum dolor amet short loin doner tail meatloaf hamburger jerky boudin picanha shankle turducken prosciutto cow kielbasa tenderloin."
        };
        var person6 = {
          ["first-Name"]: "Scooby",
          ["last-Name"]: "Doo",
          ["age"]: 18,
          ["person-desc"]: "Bacon ipsum dolor amet short loin doner tail meatloaf hamburger jerky boudin picanha shankle turducken prosciutto cow kielbasa tenderloin. "
        };
        var person7 = {
          ["first-Name"]: "Seiya",
          ["last-Name"]: "Shun",
          ["age"]: 18,
          ["person-desc"]: "Bacon ipsum dolor amet short loin doner tail meatloaf hamburger jerky boudin picanha shankle turducken prosciutto cow kielbasa tenderloin."
        };
        var person8 = {
          ["first-Name"]: "Ikki",
          ["last-Name"]: "Hyuga",
          ["age"]: 18,
          ["person-desc"]: "Bacon ipsum dolor amet short loin doner tail meatloaf hamburger jerky boudin picanha shankle turducken prosciutto cow kielbasa tenderloin."
        };
        anotherArr.push(person5, person6, person7, person8);

        var parent = document.getElementsByClassName('line1')[0];
        var frag = document.createDocumentFragment();

        anotherArr.forEach((person, i) => {
          var name = document.createElement('h4');
          var desc = document.createElement('p');
          var button = document.createElement('div');
          name.className = "lol";
          name.textContent = `${person['first-Name']} ${person['last-Name']}`;
          desc.textContent = ` ${person['person-desc']}`;
          frag.appendChild(name);
          frag.appendChild(desc);

        });
        loader.style.display = 'block'; // Trying to make loader reappear 
        parent.innerHTML = "";
        parent.appendChild(frag);

            // Disappear again after content is loaded 
        setTimeout(function() {  loader.style.display = 'none'; }, 2000);

      }

function openCity(evt, cityName) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementById(cityName).style.display = "block";
  evt.currentTarget.className += " active";
}

document.getElementById("defaultOpen").click();
</script>