要让加载画面消失,可以通过以下步骤实现:
<div id="loading-screen"></div>
#loading-screen {
width: 100%;
height: 100%;
background-color: #fff;
position: fixed;
top: 0;
left: 0;
z-index: 9999;
/* 添加动画效果 */
animation: fadeOut 1s ease-in-out forwards;
}
@keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
visibility: hidden;
}
}
window.addEventListener('load', function() {
var loadingScreen = document.getElementById('loading-screen');
loadingScreen.style.display = 'none';
});
这样,当页面加载完成后,加载画面就会通过CSS动画逐渐消失,并且在最后完全隐藏起来。
这种方法可以应用于各种网页加载场景,例如在页面初始化时加载数据、加载大量图片或者其他资源时等。通过使用CSS动画和JavaScript控制,可以提供更好的用户体验,让用户感觉页面加载更加流畅和快速。
腾讯云相关产品和产品介绍链接地址:
领取专属 10元无门槛券
手把手带您无忧上云