Javascript 单击“html加载程序”可重新出现并消失

下面的代码由一个

HTML选项卡

组成，其中填充了一些动态创建的

DOM元素

。目前，我的选项卡中有一个

动画加载程序

，当

选项卡中的内容完全加载后，
将消失

我有一个
按钮，可以重新填充我的选项卡
，我试图完成的是，当我单击该按钮时，选项卡中的内容将被清除，加载程序将重新出现，一旦用新数据重新填充选项卡，加载程序将消失

有没有一个简单的方法来实现这一点我目前正在尝试下面的方法似乎不起作用。我在代码中添加了一些我尝试的注释
任何帮助都将不胜感激，谢谢


var personArr=[]；
个人变量={
[“名字]：“约翰”，
[“姓氏”]：“能源部”，
[“年龄”]：21岁，
[“人物描述]：“培根ipsum dolor amet短腰肉doner尾部肉糕汉堡肉干boudin picanha shankle turducken火腿牛kielbasa嫩腰肉。”
};
变量person2={
[“名字]：“保罗”，
[“姓氏”]：“洛根”，
[“年龄”]：22，
[“人物描述]：“培根ipsum dolor amet短腰肉doner尾部肉糕汉堡肉干boudin picanha shankle turducken火腿牛kielbasa嫩腰肉。”
};
变量person3={
[“名字]：“肖恩”，
[“姓”]：“金”，
[“年龄”]：32，
[“人物描述]：“培根ipsum dolor amet短腰肉doner尾部肉糕汉堡肉干boudin picanha shankle turducken火腿牛kielbasa嫩腰肉。”
};
变量person4={
[“名字]：“肯”，
[“姓氏]：“周”，
[“年龄”]：12，
[“人物描述]：“培根ipsum dolor amet短腰肉doner尾部肉糕汉堡肉干boudin picanha shankle turducken火腿牛kielbasa嫩腰肉。”
};
人推（人，人2，人3，人4）；
var parent=document.getElementsByClassName（'line1'）[0]；
var frag=document.createDocumentFragment（）；
每个人（（个人，我）=>{
var name=document.createElement（'h4'）；
var desc=document.createElement（'p'）；
var按钮=document.createElement（'div'）；
name.textContent=`${person['first-name']}${person['last-name']}`；
desc.textContent=`${person['person-desc']}`；
frag.appendChild（姓名）；
框架附件（描述）；
});
父母、子女（frag）；
loader.style.display='none'；//这会使加载程序在加载内容后消失。
函数updateTab（）{
var anotherArr=[]；
变量person5={
[“名字”]：“六月”，
[“姓”]：“金”，
[“年龄”]：18，
[“人物描述]：“培根ipsum dolor amet短腰肉doner尾部肉糕汉堡肉干boudin picanha shankle turducken火腿牛kielbasa嫩腰肉。”
};
变量person6={
[“名字”]：“史酷比”，
[“姓氏]：“嘟嘟”，
[“年龄”]：18，
[“人物描述]：“培根ipsum dolor amet短腰肉doner尾部肉糕汉堡肉干boudin picanha shankle turducken火腿牛kielbasa嫩腰肉。”
};
变量person7={
[“名字]：“星矢”，
[“姓氏]：“舜”，
[“年龄”]：18，
[“人物描述]：“培根ipsum dolor amet短腰肉doner尾部肉糕汉堡肉干boudin picanha shankle turducken火腿牛kielbasa嫩腰肉。”
};
变量person8={
[“名字]：“Ikki”，
[“姓氏]：“Hyuga”，
[“年龄”]：18，
[“人物描述]：“培根ipsum dolor amet短腰肉doner尾部肉糕汉堡肉干boudin picanha shankle turducken火腿牛kielbasa嫩腰肉。”
};
另一个手推（第五个人、第六个人、第七个人、第八个人）；
var parent=document.getElementsByClassName（'line1'）[0]；
var frag=document.createDocumentFragment（）；
另一名雇员（（个人，i）=>{
var name=document.createElement（'h4'）；
var desc=document.createElement（'p'）；
var按钮=document.createElement（'div'）；
name.className=“lol”；
name.textContent=`${person['first-name']}${person['last-name']}`；
desc.textContent=`${person['person-desc']}`；
frag.appendChild（姓名）；
框架附件（描述）；
});
loader.style.display='block'；//试图使加载程序重新出现
parent.innerHTML=“”；
父母、子女（frag）；
loader.style.display='none'；//加载内容后再次消失
}
函数openCity（evt、cityName）{
var i，tabcontent，tablinks；
tabcontent=document.getElementsByClassName（“tabcontent”）；
对于（i=0；i
正文{
字体系列：Arial；
}
.标签{
溢出：隐藏；
边框：1px实心#ccc；
背景色：#f1f1；
}
.选项卡按钮{
背景色：继承；
浮动：左；
边界：无；
大纲：无；
光标：指针；
填充：14px 16px；
过渡：0.3s；
字号：17px；
}
.tab按钮：悬停{
背景色：#ddd；
}
.tab按钮。激活{
背景色：#ccc；
}
.tabcontent{
显示：无；
填充：6px 12px；
边框：1px实心#ccc；
边界顶部：无；
}
.line1{
显示：内联块；
}
.尺寸{
宽度：50%；
}
a、 莫林克{
文字装饰：无；
大纲：无；
}
.Morespan内容{
显示：无；
}
哈哈{
颜色：青柠；
字体大小：粗体；
}
.加载器{
边框：10px实心#F3；
边界半径：50%；
边框顶部：10px实心#05788C；
边框底部：10px实心#05788C；
宽度：120px；
高度：120px；
-webkit动画：旋转2s线性无限；
动画：旋转2s线性无限；
保证金：自动；
边缘顶部：30px；
边缘底部：30px；
}
@-webkit关键帧旋转{
0% {
-webkit变换：旋转（0度）；
}
100% {
-webkit变换：旋转（360度）；
}
}
@关键帧旋转{
0% {
茶
<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>