仅当在JavaScript中单击按钮时才激活预加载器
仅当在JavaScript中单击按钮时才激活预加载器
提问于 2021-04-14 16:04:32
我这里有一个按钮和一个预加载器的代码：
现在使用JavaScript，我不希望它在页面第一次加载时加载。相反，我想在点击submit按钮大约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>
然而，这个并不起作用。相反，加载器永远加载，并且在我加载页面时不会停止。如何修复此问题，并仅在单击按钮时获得加载状态？
回答 1
Stack Overflow用户
回答已采纳
发布于 2021-04-14 17:48:45
如果你使用的是bootstrap，你可以使用class。
submitBtn.addEventListener('click', () => {
loader.classList.add('d-block');
setTimeout(() => {
body.classList.add('loaded');
}, 3000);
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/67087789
复制相关文章
相似问题
腾讯云开发者
