利用JS弹出层实现简单的动态提示“正在加载中，请稍等...”

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

JQuery版本：1.7.1；

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

/************************************* 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) {
        ///	

        /// 模态窗口，继承 easy-ui.window
        ///	
        /// 扩展了{title:[div中的内容], action:[执行的动作，目前支持"close"], result:[返回结果]}
        ///	

        settings = $.extend(true, { title: '加载中...', action: "open" }, settings);


        ///	

        /// 初始化所有 cks 样式的按钮（页面运行时进行初始化）
        ///	
        ///	

        _init = function () {
            if (settings.action == "open") {
                if ($("#div_load").length == 0) {
                    var boardDiv = "
<\/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 = "
" + 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() })();

    };
})(jQuery);

 

$("#div_load").fix_ie6Select(); 这句调用另一个JS，主要作用是兼容IE6遮罩一些控件(这个是我老大写的)：

/************************************* 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 () {
        ///	

        /// 兼容弹出层在 IE6 下不能掩盖 Select
        ///	
        ///	
        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('');
                }
                else {
                    frm.css("width", w);
                    frm.css("height", h);
                }
            }
        });
    };
})(jQuery);

 

在编写一个JS类，编写三个方法，供页面调用：

/************************************* layer.class Javascript Library  ***************************
* Using jQuery 1.7.1
* Version : 1.0.0
* Name : layer.class.js
* Create by Angle.Yang on 2012/03/07
*******************************************************************************************/

$.extend({
    layer: {
        name: "layer.class.js",
        globalVar: {}, // 内部变量， 外部不得使用(document.body 未初始化时使用；内部变量)
        
        setMaskTitle: function (title) {
            ///	

            /// 修改遮罩层的内容 Angle.Yang 2012.03.07 16:35 Add
            ///	
            /// 遮罩层中的提示信息
            ///	
            $.fn.masklayer({ title: title, action: "setTitle" });
        },

        openMask: function (title) {
            ///	

            /// 显示遮罩层DIV Angle.Yang 2012.03.07 16:35 Add
            ///	
            /// 遮罩层中的提示信息
            ///	
            $.fn.masklayer({ title: title, action: "open" });
        },

        closeMask: function () {
            ///	

            /// 关闭遮罩层DIV Angle.Yang 2012.03.07 16:35 Add
            ///	
            ///	
            $.fn.masklayer({ action: "close" });
        }

    }
});

cks.using("kits/ck.layer.js"); 

编写我们的页面，引用JQuery(1.7.1)版本，引用layer.class.js；页面加入代码以及自己调用大概如下：

代码可能不简洁，希望高手留言帮忙优化一下，谢谢！