Javascript 覆盖加载器页面避免对页面上的元素进行操作

$(document).ready(function() {
  // Wait 3 seconds
  setTimeout(function() {
    document.body.style.overflow = "visible";
    document.getElementById("modalLoader").setAttribute("style", "opacity: 0;");
  });
});

.loaderScreen {
  position: fixed;
  top: 0;
  left: 0;
  display: block;
  height: 100%;
  background-color: whitesmoke;
  opacity: 1;
  width: 100%;
  z-index: 100;
  overflow-y: hidden;
  transition: opacity 2s;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div id="modalLoader" class="container-fluid loaderScreen text-center">
  <h3 class="animate-charcter">Web page is loading...</h3>
</div>

const overlay = document.querySelector('#modalLoader');

// remove element when opacity transition ends
overlay.addEventListener('transitionend', e => e.target.style.display = 'none'); 

// fade element out after 3 seconds
setTimeout(function() {
  document.body.style.overflow = "visible";
  overlay.style.opacity = 0;
}, 3000);

.loaderScreen {
  position: fixed;
  top: 0;
  left: 0;
  display: block;
  height: 100%;
  background-color: whitesmoke;
  opacity: 1;
  width: 100%;
  z-index: 100;
  overflow-y: hidden;
  transition: opacity 2s;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div id="modalLoader" class="container-fluid loaderScreen text-center">
  <h3 class="animate-charcter">Web page is loading...</h3>
</div>

<input type="text" id="exmaple-element" />

Javascript相关问答推荐

RxJS setTimeout操作符等效

如何判断属于多个元素的属性是否具有多个值之一

在React中获取数据后，如何避免不必要的组件闪现1秒？

提交表格后保留Web表格中的收件箱值？

MongoDB中的引用

使用i18next在React中不重新加载翻译动态数据的问题

我们如何从一个行动中分派行动

构造HTML表单以使用表单数据创建对象数组

setcallback是什么时候放到macrotask队列上的？

使用JQuery单击元素从新弹出窗口获取值

如何将Cookie从服务器发送到用户浏览器

还原器未正确更新状态

使用原型判断对象是否为类的实例

这个值总是返回未定义的-Reaction

try 使用javascript隐藏下拉 Select

为什么我的按钮没有从&q；1更改为&q；X&q；？

JavaScript -复制到剪贴板在Windows计算机上无效

在HTML5画布上下文中使用putImageData时，重载解析失败

AstroJS混合模式服务器终结点返回404

使用导航时，路径的所有子组件都必须是路径