JSポップアップ層による簡単なダイナミックヒント「ロード中ですので、少々お待ちください...」

6942 ワード
JavaScript 機能 jquery action library javascript
最近のプロジェクトでは、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 = "";
                    $(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 + "";
                    $(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);</code></pre>  <br>  <br>JSクラスを  し、ページ び し の3つのメソッドを  します.<pre><code>/************************************* 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) {
            ///	<summary>
            ///          Angle.Yang 2012.03.07 16:35 Add
            ///	</summary>
            /// <param name="title" type="string"/>         
            ///	<returns type="void"/>
            $.fn.masklayer({ title: title, action: "setTitle" });
        },

        openMask: function (title) {
            ///	<summary>
            ///      DIV Angle.Yang 2012.03.07 16:35 Add
            ///	</summary>
            /// <param name="title" type="string"/>         
            ///	<returns type="void"/>
            $.fn.masklayer({ title: title, action: "open" });
        },

        closeMask: function () {
            ///	<summary>
            ///      DIV Angle.Yang 2012.03.07 16:35 Add
            ///	</summary>
            ///	<returns type="void"/>
            $.fn.masklayer({ action: "close" });
        }

    }
});

cks.using("kits/ck.layer.js"); </code></pre>  <br> たちのページを  し、JQuery(1.7.1)バージョンを  し、layer.を  します.class.js;ページにコードを  し、  で び すには、 のようにします.<pre><code>    <disable_script src="../js/jquery.js" type="text/javascript"/>
    <disable_script src="../js/layer.class.js" type="text/javascript"/>
    <disable_script type="text/javascript" language="javascript">
        function GetDataSource() {
           layer.openMask("     ，   ..."); //         
           $.ajax({
               url: s.url + "&amp;FormControlID=" + obj.id,
               async: true,
               cache: false,
               contentType: "text/xml; charset=\"utf-8\"",
               data: {},
               dataType: "xml",
               type: "Post",
               success: function (xml, textStatus, jqXHR) {
                   layer.setMaskTitle("       ..."); //           
                   //         
               },
               complete: function (jqXHR, textStatus) {
                   layer.closeMask(); //        
               }
           });
       }
      </disable_script></code></pre>  <br>コードは  ではないかもしれませんが、  を して   してほしいです.ありがとうございます.<br><!--   ページ-  の    ビット--><br></div><br><div class="col-md-3"><br><div class="row"id="ad"><br><!--   ページ-  1    ビット--><br><div id="right-1"class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"><br></div><br><!--   ページ-  2    ビット--><br><div id="right-2"class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"><br></div><br><!--   ページ-  3    ビット--><br><div id="right-3"class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"><br></div><br></div><br></div>
ctime時間
Watchdog実現原理