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

我这里有一个按钮和预加载程序代码：

现在使用JavaScript，我不希望在第一次加载页面时加载它。相反，当我点击submit按钮大约2-3秒时，我想加载这个预加载程序。在我的Javascript中：

---

submitBtn.addEventListener（'ciick'，（）=>{
addEventListener（'load'，function（））{
document.querySelector（'body'）.classList.add（“已加载”）
})；

#加载器包装器{
位置：固定；
排名：0；
左：0；
宽度：100%；
身高：100%；
z指数：1000；
}
#装载机{
背景图像：url（'https://cdn3.iconfinder.com/data/icons/business-avatar-1/512/1_avatar-512.png');
显示：块；
位置：相对位置；
最高：50%；
左：50%；
宽度：120px；
高度：119px；
利润率：-75px 0-75px；
边框顶色：白色；
边界半径：100%；
-webkit动画：旋转2s线性无限；
动画：旋转2s线性无限；
z指数：1001；
}
@-webkit关键帧旋转{
0% {
-webkit变换：旋转（0度）；
-ms变换：旋转（0度）；
变换：旋转（0度）；
}
100% {
-webkit变换：旋转（360度）；
-ms变换：旋转（360度）；
变换：旋转（360度）；
}
}
@关键帧旋转{
0% {
-webkit变换：旋转（0度）；
-ms变换：旋转（0度）；
变换：旋转（0度）；
}
100% {
-webkit变换：旋转（360度）；
-ms变换：旋转（360度）；
变换：旋转（360度）；
}
}

提交

如果使用引导，则可以使用类

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

---

为了在页面加载时不显示它，请先将其隐藏。如

display:none；

在

#loader wrapper

规则中。要显示它，只需设置

loaderDiv.style.display=“block”

。（顺便说一句，像在按钮的点击监听器中那样分配事件监听器是自找麻烦，在99%的情况下，所有事件监听器都是在页面加载时分配的，并准备在事件触发时根据应用程序状态进行操作）

'cick'

应该是

'click'

，并且您的函数没有关闭（括号）。您的控制台中可能有错误，因为脚本在开始时崩溃。您能给我一个使用我的代码的示例吗？

submitBtn.addEventListener（'click'，（）=>{document.getElementById（'loader-wrapper'）。classList.add（'d-block'）；document.querySelector（'body'）。classList.add（'loaded'）；}）

尝试了这个方法，但没有成功。我首先将display:none放在

加载程序包装器上