在页面加载时加载 Javascript 警报

Question

我想知道是否可以在内容之前加载 JavaScript 警报 在页面加载时

无论我尝试做什么，警报都会触发并且页面不会加载，直到警报关闭

<script>
    alert('But wait, there\'s more...');
</script>

Answer 1

如果你使用 jQuery，你可以试试这个：$(document).ready(function)

您可以创建一个包含警报的函数，并将其作为参数放置。

Answer 2

不需要第三方库，只需添加某种加载警报、您喜欢的样式，并在文档加载后将其从 DOM 中删除。背景只是为了增加一点不透明度。

const alertElm = document.getElementById('loading-alert');

setTimeout(() => { document.body.removeChild(alertElm); }, 2000);

.alert-container {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.alert-backdrop {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0.89;
  background-color: #bbb;
}

.alert-content {
  position: relative;
  display: inline-block;
  background-color: white;
  padding: 20px;
  border-radius: 10px;
  border: 5px solid black;
}

<div class="alert-container" id="loading-alert">
  <div class="alert-backdrop"></div>
  <div class="alert-content">
    ...loading
  </div>
</div>