仅当在 JavaScript 中单击按钮时才激活预加载器

Question

我在这里有一个按钮和预加载器的代码：

现在使用 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>

但是，这个没有用。 相反，加载程序永远加载，并且在我加载页面时永远不会停止。 如何解决此问题，并且仅在单击按钮时才能加载 state？

Answer 1

如果您使用引导程序，则可以使用 class。

submitBtn.addEventListener('click', () => {
    loader.classList.add('d-block');
    setTimeout(() => { 
        body.classList.add('loaded'); 
    }, 3000);
});