最近项目中大量用到了JQuery中的Ajax异步加载数据，数据量非常大，导致每次加载的时候都感觉到非常非常慢，让客户体验非常不好，就想到用JS做一个简单的提示。

JQuery版本：1.7.1；

编写一个JS类(ck.layer.js)：

[javascript]  view plain copy  
 /************************************* Achievo.Javascript Library ************************** 
 * Using jQuery 1.7.1 
 * Using cks.js 1.0.1 
 * Name : ck.layer.js 
 * Create by Angle.Yang on 2012/03/07 [V1.0.0] 
 *******************************************************************************************/  
 (function ($) {  
   
     $.fn.masklayer = function (settings) {  
         /// <summary>  
         /// 模态窗口，继承 easy-ui.window  
         /// </summary>  
         /// <param name="settings" type="object">扩展了{title:[div中的内容], action:[执行的动作，目前支持"close"], result:[返回结果]}</param>  
         /// <returns type="void" />  
   
         settings = $.extend(true, { title: '加载中...', action: "open" }, settings);  
   
   
         /// <summary>  
         /// 初始化所有 cks 样式的按钮（页面运行时进行初始化）  
         /// </summary>  
         /// <returns type="void" />  
   
         _init = function () {  
             if (settings.action == "open") {  
                 if ($("#div_load").length == 0) {  
                     var boardDiv = "<div id='div_load'><\/div>";  
                     $(document.body).append(boardDiv);  
                 }  
                 if ($("#div_load").length > 0) {  
                     $("#div_load").fix_ie6Select();  
                     $("#div_load").css("display", "block");  
                     $("#div_load").css("height", document.body.offsetHeight);  
                     $("#div_load").html(settings.title);  
                 }  
             }  
             else if (settings.action == "close") {  
                 if ($("#div_load").length > 0) $("#div_load").css("display", "none");  
             }  
             else if (settings.action = "setTitle") {  
                 if ($("#div_load").length > 0) $("#div_load").html(settings.title);  
                 else {  
                     var boardDiv = "<div id='div_load'>" + settings.title + "<\/div>";  
                     $(document.body).append(boardDiv);  
                     $("#div_load").fix_ie6Select();  
                     $("#div_load").css("display", "block");  
                     $("#div_load").css("height", document.body.offsetHeight);  
                 }  
             }  
         };  
   
   
         return (function () { _init() })();  
   
     };  
 
  
 
  
 
  
 
  
 $("#div_load").fix_ie6Select(); 这句调用另一个JS，主要作用是兼容IE6遮罩一些控件(这个是我老大写的)：
  
 
  
[javascript]  view plain copy  
 /************************************* Achievo.Javascript Library ************************** 
 * Using jQuery 1.7.1 
 * Using cks.js 1.0.2 
 * Name : ck.fixer.js 
 * Create by Toky on 2012/02/14 [V1.0.0] 
 *******************************************************************************************/  
   
 (function ($) {  
     $.fn.fix_ie6Select = function () {  
         /// <summary>  
         /// 兼容弹出层在 IE6 下不能掩盖 Select  
         /// </summary>  
         /// <returns type="void" />  
         return this.each(function (index) {  
             var frm = $(this).find('iframe[tag*="ie6Selector"]');  
             if (cks.browser.IE6) {  
                 var w = $(this).width();  
                 var h = $(this).height();  
                 if (frm.length == 0) {  
                     $(this).prepend('<iframe tag="ie6Selector" src="" frameborder="no" marginwidth="0" marginheight="0" style="border:none;position:absolute;visibility:inherit;top:0px;left:0px;width:' + w + 'px;height:' + h + 'px;z-index:-1;"></iframe>');  
                 }  
                 else {  
                     frm.css("width", w);  
                     frm.css("height", h);  
                 }  
             }  
         });  
     };  
 })(jQuery);  

 })(jQuery);  