Question

好的，首先，这是我的代码。

HTML

<!DOCTYPE html>
<html>
<head>
<title>Loader Example</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="loader" id="loader"></div>
<h1>Hello World</h1>
</body>
</html>

的Javascript

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

的 CSS

body {
    height: 100%;
    widows: 100%;
    overflow: hidden;
}
.loader {
    position: absolute;
    height: 80px;
    width: 80px;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    border: 6px solid lightgrey;
    border-radius: 100%;
    border-top: 6px solid skyblue;
    animation: spin 1s infinite linear;
}
@keyframes spin {
    from{
        transform: rotate(0deg);
}
    to{
        transform: rotate(360deg);
}
}

现在问题是内容被加载但是微调器没有消失。任何解决方案 BTW。这是我在这里发表的第一篇文章，如果您发现代码格式不正确或其他错误，请原谅我。

Answer 1

loader不是event。

window.addEventListener ("loader", function() )

将其更改为：

window.addEventListener ("load", function() {
    loader.style.display = 'none';
});

window.addEventListener ("load", fn())等待所有内容加载，包括样式表和图像。

加载事件在文档加载过程结束时触发。此时，文档中的所有对象都在DOM中，并且所有图像，脚本，链接和子帧都已完成加载。

https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onload

Answer 2

您可以使用onload在加载页面内容时隐藏微调器

在网页完全加载时隐藏微调器：

window.addEventListener ("load", function() {
    loader.style.display = 'none';
});

超时：

//Hide the spinner after 2 seconds
setTimeout(function(){loader.style.display = 'none';}, 2000);

使用Jquery：

$(window).load(function(){
   // PAGE IS FULLY LOADED  
  loader.style.display = 'none';
});

演示示例：

var loader = document.getElementById('loader');

window.addEventListener ("load", function() {
    //Hide the spinner after 2 seconds
setTimeout(function(){loader.style.display = 'none';}, 2000);

});

body {
    height: 100%;
    widows: 100%;
    overflow: hidden;
}
.loader {
    position: absolute;
    height: 80px;
    width: 80px;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    border: 6px solid lightgrey;
    border-radius: 100%;
    border-top: 6px solid skyblue;
    animation: spin 1s infinite linear;
}
@keyframes spin {
    from{
        transform: rotate(0deg);
}
    to{
        transform: rotate(360deg);
}
}

<!DOCTYPE html>
<html>
<head>
<title>Loader Example</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="loader" id="loader"></div>
<h1>Hello World</h1>
</body>
</html>

预加载器继续加载，并且在加载内容时不会消失

2 个答案: