,可以通过以下步骤实现:
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<div id="preloader">
<div class="spinner"></div>
</div>
这里使用了一个id为"preloader"的div元素作为预加载页的容器,内部包含一个class为"spinner"的子元素,用于显示加载动画。
#preloader {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #fff;
z-index: 9999;
}
.spinner {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 40px;
height: 40px;
border: 4px solid #f3f3f3;
border-top: 4px solid #3498db;
border-radius: 50%;
animation: spin 2s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
这里使用了一些基本的CSS样式,可以根据需求进行调整。
$(document).ready(function() {
// 显示预加载页
$('#preloader').show();
// 隐藏预加载页
setTimeout(function() {
$('#preloader').hide();
}, 2000); // 设置预加载页显示的时间,这里是2秒
});
这段代码会在页面加载完成后显示预加载页,并在指定的时间后隐藏预加载页。你可以根据实际情况调整显示时间。
至此,使用jQuery仅显示一次预加载页的功能就实现了。当页面加载完成后,预加载页会显示出来,一段时间后自动隐藏。你可以根据需要在显示和隐藏预加载页的代码中添加其他逻辑,例如加载数据、执行其他操作等。
推荐的腾讯云相关产品:无
注意:本答案中没有提及亚马逊AWS、Azure、阿里云、华为云、天翼云、GoDaddy、Namecheap、Google等流行的云计算品牌商,如需了解相关产品和服务,请自行搜索相关信息。
领取专属 10元无门槛券
手把手带您无忧上云