Question

我在下面的代码中包含一个带有加载程序动画的HTML标签。我要完成的工作是，只要选项卡中的内容完全加载，加载器动画就会消失，我尝试在下面添加一个JS代码，只要加载了所有内容，加载器就会消失，但似乎无法正常工作。

我在下面做错了什么？任何帮助将不胜感激。

var tabs = document.getElementById("tabc");
var loader = document.getElementById("loader");
tabs.addEventListener('load', function()
{
loader.style.display = 'none';
})


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;}

/* Style the tab */
.tab {
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
}

/* Style the buttons inside the tab */
.tab button {
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
    font-size: 17px;
}

/* Change background color of buttons on hover */
.tab button:hover {
    background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
    background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
    display: none;
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-top: none;
}
.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">

</head>
<body>

<div class="tab">
  <button class="tablinks" onclick="openCity(event, 'tabc')" id="defaultOpen">London</button>
</div>

<div id="tabc" class="tabcontent">
        <div class="loader"></div>
        <iframe width="560" height="315" src="https://www.youtube.com/embed/wowAOdTYqw8" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
        <iframe width="560" height="315" src="https://www.youtube.com/embed/wowAOdTYqw8" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
        <iframe width="560" height="315" src="https://www.youtube.com/embed/wowAOdTYqw8" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
        <iframe width="560" height="315" src="https://www.youtube.com/embed/wowAOdTYqw8" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
        <iframe width="560" height="315" src="https://www.youtube.com/embed/wowAOdTYqw8" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

</div>



     
</body>
</html>

Answer 1

将ID添加到您的加载程序div

如果使用 javascript

，请使用window.onload

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

在 jQuery

中

var loader = $('#loader');
$(window).load(function() {
 loader.hide();
});

var loader = document.getElementById("loader");
window.onload = function () {
 loader.style.display = 'none';
}


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;}

/* Style the tab */
.tab {
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
}

/* Style the buttons inside the tab */
.tab button {
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
    font-size: 17px;
}

/* Change background color of buttons on hover */
.tab button:hover {
    background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
    background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
    display: none;
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-top: none;
}
.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); }
}

<div class="tab">
  <button class="tablinks" onclick="openCity(event, 'tabc')" id="defaultOpen">London</button>
</div>

<div id="tabc" class="tabcontent">
        <div id="loader" class="loader"></div>
        <iframe width="560" height="315" src="https://www.youtube.com/embed/wowAOdTYqw8" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
        <iframe width="560" height="315" src="https://www.youtube.com/embed/wowAOdTYqw8" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
        <iframe width="560" height="315" src="https://www.youtube.com/embed/wowAOdTYqw8" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
        <iframe width="560" height="315" src="https://www.youtube.com/embed/wowAOdTYqw8" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
        <iframe width="560" height="315" src="https://www.youtube.com/embed/wowAOdTYqw8" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

</div>

加载内容后使加载程序消失

1 个答案: