我这里有一个按钮和预加载器的代码：
现在使用 JavaScript，我不想在页面首先加载时加载它。相反，当我点击提交按钮大约 2-3 秒时，我想加载这个预加载器。所以在我的 Javascript 上：
submitBtn.addEventListener('ciick', () => {
window.addEventListener('load', function() {
document.querySelector('body').classList.add("loaded")
});#loader-wrapper {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1000;
}
#loader {
background-image: url('https://cdn3.iconfinder.com/data/icons/business-avatar-1/512/1_avatar-512.png');
display: block;
position: relative;
top: 50%;
left: 50%;
width: 120px;
height: 119px;
margin: -75px 0 0 -75px;
border-top-color: white;
border-radius: 100%;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
z-index: 1001;
}
@-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes spin {
0% {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}<button type="submit" id="submit-btn">Submit</button>
<div id="loader-wrapper">
<div id="loader"></div>
<div class="loader-section section-left"></div>
<div class="loader-section section-right"></div>
</div>然而，这个没有用。相反，加载器会永远加载并且在我加载页面时永远不会停止。如何解决此问题并仅在单击按钮时达到加载状态？
如果您使用引导程序，则可以使用类。
submitBtn.addEventListener('click', () => {
loader.classList.add('d-block');
setTimeout(() => {
body.classList.add('loaded');
}, 3000);
});
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句