Question

下面有这段代码，其中包含一个Tab和动态创建的DOM元素，以及一个HTML Loader动画。我要完成的工作是在加载div personBorder时使HTML加载器消失。

有没有简单的方法可以做到这一点？因为我在下面做的事情似乎没有用，所以我不确定是否出了什么问题。任何帮助将不胜感激。

这是我尝试执行的代码，但无法正常工作。

var loader = document.getElementById("loader");
var bord = document.getElementById("personBorder");
bord.onload = function () {
  loader.style.display = 'none';   
}

var loader = document.getElementById("loader");
var bord = document.getElementById("personBorder");
bord.onload = function () {
  loader.style.display = 'none';   
}

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');
  var border = document.createElement('div');
  name.textContent = `${person['first-Name']} ${person['last-Name']}`;
  desc.textContent = ` ${person['person-desc']}`;
  border.appendChild(name);
  border.appendChild(desc);
    frag.appendChild(border);
    border.className = "personBorder";
    border.id = "personBorder";
});
parent.appendChild(frag);

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); }
}
.personBorder{
    border: 1px solid black;
    margin:10px; 
}

<!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">
            <div id="loader" class="loader"></div>
            <div class="line1">
            </div>
        </div>
    </div>
</body>
</html>

Answer 1

由于您正在使用jquery，请尝试以下操作：

$("#personBorder").ready(function () {
  $('#loader').remove();
 }

使div加载后使HTML加载器消失

1 个答案: