JS实现页面提交时的加载遮罩效果

"JavaScript实现页面提交时的div遮罩加载效果" 在网页开发中，当用户进行提交操作，如表单提交或按钮点击时，为了防止用户重复提交并提供一个友好的用户体验，通常会显示一个加载遮罩层。这个遮罩层会覆盖整个页面，显示出一个正在处理的提示，直到后台处理完成或者返回响应。JavaScript是实现这种功能的常用工具，特别是结合jQuery库，可以轻松地创建和移除这个遮罩层。下面我们将详细介绍如何使用JavaScript和jQuery实现一个简单的div遮罩加载效果。 1. **创建遮罩层和加载提示** 在描述的代码中，`$.showDivShade`函数用于添加遮罩层。首先，它在body末尾动态插入两个div元素：一个id为"popupCover"的背景遮罩，另一个id为"popupLayer"的加载提示。加载提示包含一个等待动画图片。接着，使用CSS设置这两个div的位置、大小、透明度等样式。 2. **定位与调整** 对于"popupLayer"，其位置通过`$(document).scrollTop()`和`$(window).height()`来适应页面滚动，并且`margin-top`设置使得加载提示居中。如果加载提示的高度大于窗口高度，将隐藏"popupLayer"，以避免超出视口范围。对于"popupCover"，其宽度和高度设置为body的宽度和高度，以完全覆盖页面，同时设置为半透明灰色。 3. **渐显效果** 使用jQuery的`fadeTo`方法，渐显遮罩层和加载提示，使得加载过程更平滑。`$("#popupCover").fadeTo("normal",0.8)`让遮罩层逐渐变为80%的不透明度，`$("#popupLayer").fadeTo("normal",1)`则让加载提示完全显现。 4. **取消遮罩层** 当后台处理完成，需要移除遮罩层时，调用`$.hideDivShade`函数。这个函数通过jQuery选择器找到"popupLayer"和"popupCover"，并使用`fadeOut`方法使其渐隐，最后从DOM中移除这两个元素。 5. **防止重复提交** 在实际应用中，除了显示遮罩层，还需要阻止表单的重复提交。这可以通过禁用提交按钮或在提交请求后立即设置一个标志来实现。例如，可以添加一个全局变量`isSubmitting`，在提交时设为true，请求完成后设为false，这样可以检查当前是否正在提交，避免重复操作。 JavaScript和jQuery提供了方便的方法来实现页面提交时的遮罩加载效果，既增强了用户体验，也有效地防止了重复提交。通过适当的优化和自定义，可以适应各种不同的网页设计和交互需求。