我想用JS HTML CSS JQuery创建一个预加载屏幕（可选），没有后端
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了我想用JS HTML CSS JQuery创建一个预加载屏幕（可选），没有后端相关的知识，希望对你有一定的参考价值。
我想创建一个Pre Loading Screen，因此，如果我的网站加载时间太晚，它可以防止用户离开我的页面。我已经准备好要在加载屏幕时显示的所有动画，并将所有动画放在一个名为loadup的div中。我希望加载div在开始时显示，并在页面加载时消失。我希望div在加载时具有白色背景，而不是叠加。
答案
jQuery window.load方法在加载所有内容（如图像，js等之后工作。预加载div从一开始就覆盖整个屏幕，当所有内容加载完成时，它将设置为display：none。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="assets/app.css">
<title>Preloading Screen</title>
</head>
<body>
<div class="pre-load">
<p class="pre-load-text">Hello world</p>
</div>
<div class="page-main">
<header>Your header</header>
<div class="container">
<p>Your page content</p>
</div>
<footer>Your footer</footer>
</div>
<script
src="https://code.jquery.com/jquery-1.12.4.min.js"
integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
crossorigin="anonymous">
</script>
<script>
$(window).load(function() {
$('.pre-load').css('display', 'none')
})
</script>
</body>
</html>
以上是关于我想用JS HTML CSS JQuery创建一个预加载屏幕（可选），没有后端的主要内容，如果未能解决你的问题，请参考以下文章
我想用css和js做一个像google play store这样的侧边栏