下面就为你介绍“基于JavaScript实现页面加载loading效果”的完整攻略。
说明
在现代Web应用程序中，页面加载速度很重要，而loading效果可以让用户在等待页面加载时感受到良好的用户体验。本文将详细讲解如何使用JavaScript实现页面加载loading效果，包括两种示例。
基本思路
实现页面加载loading效果，需要以下步骤：
1.在HTML中添加loading界面
在页面的顶部或中间添加一个loading界面，作为用户等待页面加载的提示。
2.使用JavaScript控制loading界面的显示和隐藏
采用JavaScript编写的loading效果，需要通过JavaScript控制loading界面的显示和隐藏，如通过控制CSS的display属性。
3.在页面完成加载后隐藏loading界面
当页面加载完成后，需要隐藏loading界面，让用户看到页面的内容。
示例一
下面是一个使用HTML和CSS实现loading效果的示例：
<body>
<!--loading界面-->
<div id="loading">
<div id="loadingImg"></div>
</div>
<!-- 页面内容 -->
<div id="content">
<h1>Welcome!</h1>
<p>My website is loading...</p>
</div>
<script>
// 页面加载完成后隐藏loading界面
window.onload = function() {
document.getElementById("loading").style.display = "none";
document.getElementById("content").style.display = "block";
};
</script>
<style>
/* loading界面样式 */
#loading {
width: 100vw;
height: 100vh;
background-color: #ffffff;
position: fixed;
top: 0;
left: 0;
z-index: 9999;
display: flex;
justify-content: center;
align-items: center;
}
#loadingImg {
background-image: url("loading.gif");
background-size: contain;
background-repeat: no-repeat;
width: 200px;
height: 200px;
}
/* 隐藏内容 */
#content {
display: none;
}
</style>
</body>
在这个示例中，我们在页面中添加了一个loading界面，通过CSS实现loading效果，然后通过JavaScript控制loading界面的显示和隐藏，当页面加载完成后隐藏loading界面。
示例二
下面是一个使用第三方库jQuery实现loading效果的示例：
<body>
<!--loading界面-->
<div id="loading"></div>
<!-- 页面内容 -->
<div id="content">
<h1>Welcome!</h1>
<p>My website is loading...</p>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
// 页面加载完成后隐藏loading界面
$(window).on("load", function() {
$("#loading").fadeOut("slow", function() {
$("#content").fadeIn("slow");
});
});
</script>
<style>
/* loading界面样式 */
#loading {
width: 100vw;
height: 100vh;
background-color: #ffffff;
position: fixed;
top: 0;
left: 0;
z-index: 9999;
display: flex;
justify-content: center;
align-items: center;
}
/* loading动画 */
#loading::before {
content: "";
width: 40px;
height: 40px;
border-radius: 50%;
border: 2px solid #333;
border-top-color: #fff;
animation: spin 0.8s ease-in-out infinite;
}
/* 动画实现 */
@keyframes spin {
to {
transform: rotate(360deg);
}
}
/* 隐藏内容 */
#content {
display: none;
}
</style>
</body>
在这个示例中，我们使用了第三方库jQuery实现了loading效果，通过控制loading界面的透明度实现了渐隐的效果，并在页面加载完成后，显示页面内容。
结论
以上就是使用JavaScript实现页面加载loading效果的方法和两个示例。使用JavaScript、CSS、jQuery等技术可以实现页面加载loading效果，提高用户体验。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：基于javascript实现页面加载loading效果 - Python技术站
微信扫一扫 
支付宝扫一扫 