利用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) {
        /// <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() })();

    };
[javascript] view
plaincopy





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