对于一些需要等待加载的页面，往往需要使用遮罩层来提示用户正在加载中，以提高用户体验。使用jquery实现遮罩层，可以轻松实现这一功能。
首先，我们需要在页面引入jquery库文件：
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
接着，定义一个遮罩层的样式：
.mask{position: fixed;top: 0;left: 0;z-index: 999;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.5);display: none;}.loading{position: fixed;top: 50%;left: 50%;z-index: 1000;transform: translate(-50%,-50%);background-image: url(loading.gif);background-position: center;background-repeat: no-repeat;width: 50px;height: 50px;text-align: center;display: none;}其中，mask类为遮罩层的样式，loading类为加载图标的样式。
然后，在页面中定义需要使用遮罩层的元素，并在该元素内部添加遮罩层和加载图标：
<div id="wrapper"><div class="mask"></div><div class="loading"></div>//页面内容</div>
接下来，使用jquery实现遮罩层的显示和隐藏：
<script>$(document).ready(function(){$(#wrapper).on(click, function(){$(.mask).show();$(.loading).show();//模拟加载延迟setTimeout(function(){$(.mask).hide();$(.loading).hide();}, 3000);})})</script>在上述代码中，当用户点击#wrapper元素时，遮罩层和加载图标同时显示，模拟一个3秒钟的加载过程后，遮罩层和加载图标同时隐藏。
这样，我们就成功地实现了jquery遮罩层加载中的功能，使页面看起来更加专业和友好。
