在网页开发中，往往需要向用户呈现较为复杂的页面，而这些页面需要一定时间进行渲染和加载。为了提升用户体验，我们可以通过使用jQueryloading来添加一个简单的加载动画，提示用户页面正在加载中。
在页面的<body>标签中添加一个容器元素，用于显示加载动画：
<div id="loading">
<div class="spinner"></div>
</div>
其中，<div class="spinner"></div>表示我们将要在CSS样式中定义的转圈动画。
在页面中添加以下CSS代码，定义加载动画的样式：
#loading {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.5);
z-index: 9999; /* 确保该元素处于最顶层 */
}
.spinner {
width: 50px;
height: 50px;
border-radius: 50%;
border-top: 3px solid #3498db;
border-right: 3px solid transparent;
animation: spin 1s linear infinite;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
其中，#loading元素使用position: fixed属性将其固定在页面的最顶部，并半透明地覆盖整个页面，以达到“遮罩”的效果。.spinner则定义了一个转圈动画，实现方式是通过@keyframes关键字定义一段旋转动画轨迹。
我们可以在jQuery中添加以下代码，控制加载动画的出现和消失：
$(document).ready(function(){
// 页面加载完成后隐藏加载动画
$("#loading").fadeOut();
});
$(window).on("beforeunload", function(){
// 在页面跳转时显示加载动画
$("#loading").show();
});
其中，.fadeOut()方法用于在页面加载完成后，渐渐隐藏#loading元素，从而使加载动画消失。而当用户点击链接跳转到其他页面时，我们可以使用.show()方法及beforeunload事件，让加载动画重新显示出来，提示用户页面正在加载中。
这就是使用jQuery实现页面加载动画的全部代码示例。通过简单的CSS样式和jQuery代码，我们就能为用户提供更加友好的页面交互体验。
本文链接：http://task.lmcjl.com/news/12663.html