页面加载遮盖插件LoadMark（如何调用jQuery插件学习第十一天）-优快云博客

LoadMark是一款jQuery插件，能屏蔽DOM元素并显示加载提示，常用于表单提交、异步加载等耗时操作。它体积小、使用方便。文中介绍了插件文件、下载地址、功能（如通过按钮控制加载遮盖提示），还说明了实现代码及分析，包括引入文件和调用自定义方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

LoadMark是一款能够屏蔽DOM元素并显示加载提示的jQuery插件，它的主要功能是可以屏蔽指定元素中的内容区域。如该元素是一个提交数据的表单，那么只要执行该插件的mask()方法，在表单区域中将显示页面遮盖层和加载提示信息。此时，用户不能操作该表单中的任何元素，而表单的提交动作并不受影响。由于该插件具有这一特性，常用于表单提交，异步加载等耗时较长的操作中。此外，该插件体积很小，使用方法也十分方便。

LoadMark插件的使用：

（1）插件文件：

Js-8-11/jquery.LoadMark.js

（2）下载地址：

http://code.google.com/p/jquery-loadmask/

（3）功能描述：

在页面中增加三个按钮，分别为"开始"，"结束"，"延时"。单击"开始"按钮时，执行页面加载掩盖提示；单击"结束"按钮时，隐藏页面加载遮盖提示；单击"延时"按钮时，按照设置的时间，延时执行页面加载遮盖提示。

（4）实现代码：

<link href="Css-8-11/jquery.loadmask.css" rel="stylesheet" type=""text/css/>

<script type="text/javascript" src="Jscript/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="Js-8-11/jquery.loadmark.css"></script>

<style type="text/css">
    body{font-size:13px}
    #ifra{border:solid 1px #555;
          width:260px;height:160px}
    #title{text-align:center;}
    #content{padding:10px;width:240px;
    height:114px;background-color:#fff;}
    .txt{border:#666 1px solid;
    padding:2px;width:150px;margin-right:3px}
    .btn{border:#666 1px solid;padding:2px;width:80px;
    filter:progid:DXImageTransform.Microsoft
    .Gradient(GradientType=0,StartColorStr=#ffffff,
    EndColorStr=#ECE9D8);}
</style>

<script type="text/javascript">
    $(function(){
        var $cnt = $("#content");
        $("#btnStart").click(function() {
            //执行页面加载遮盖提示
            $cnt.mask("正在加载中......");
        })
        $("#btnEnd").click(function() {
            //关闭页面加载遮盖提示
            if($cnt.isMasked()) {
                $cnt.unmask();
            }
        })
        $("#btnDelay").click(function() {
            //延时页面加载遮盖提示
            $cnt.mask("正在加载中......",1000);
        })
    })
</script>

<div id="ifra">
    <div id="title">
        <input type="button" id="btnStart" value="开始" class="btn" />
        <input type="button" id="btnEnd" value="结束" class="btn" />
        <input type="button" id="btnDelay" value="延时" class="btn" />
    </div>
    <div id="content">
        用户名：<br />
            <input id="username" name="username" type="text" class="txt" />
            <font color="red">*</font><br />
        密码：<br />
            <input id="password" name="password" type="password" class="txt" />
            <font color="red">*</font><br />
            <input id="sbUser" type="submit" value="提交" class="btn" />
    </div>
</div>

（5）代码分析：

在本示例中，为了保证加载遮盖插件能够将提示内容正常显示在页面中，除了<head>元素中导入插件的JavaScript格式文件外，还需要引入相应的CSS样式文件，代码如下：

<link href="Css-8-11/jquery.loadmask.css" rel="stylesheet" type=""text/css/>
<script type="text/javascript" src="Js-8-11/jquery.loadmark.css"></script>

接下来，为了显示页面加载遮盖层，需要调用插件对应的方法，LoadMask插件拥有3个自定义方法，分别为mask()，unmask()，isMasked()。

第一个方法调用格式如下：