javascript - 单击离开页面时加载图像

Question

所以我目前使用这段代码在登录时显示加载图像。

HTML

<div id="overlay">
<div class="spinner"></div> 
</div>

JavaScript

var overlay = document.getElementById("overlay");

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

这段代码可以正常工作，但我有一个问题，当有人登录时，网站需要一段时间才能加载到登录屏幕，然后才会被带到仪表板屏幕。所以我想知道是否有一种方法可以在您点击远离它时在屏幕上添加这个加载图像，虽然它加载但仍然没有进入下一页？

我希望这是有道理的，在此先感谢您的帮助!

Answer 1

通常你不需要下一页的微调器，你想在返回下一页之前在第一页应用微调器，所以你可能想将事件附加到第一页的登录按钮的 onclcik页。像这样的东西:

var bttn = document.getElementById('yourButtonId');
bttn.addEventListener('click', function(){
      overlay.style.display = '';
    });