如何避免页面之间的闪烁

时间:2013-06-14 14:56:09

标签: jquery-ui jquery jquery-mobile flicker

我正在使用jquery mobile和html5。 当我从一个页面重定向到另一个页面时,获得一个白色屏幕(闪烁)。 那么如何摆脱这个问题。

这是我的代码.. --Page1 -

<html>
    <head>
    <title>Login</title>
     <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"  />
     <meta name="x-blackberry-defaultHoverEffect" content="false" />
     <meta name="apple-mobile-web-app-capable" content="yes" />
     <meta name="apple-mobile-web-app-status-bar-style" content="black" />

    <link href="css/jquery.mobile-1.3.1.css" rel="stylesheet"  type="text/css"/>
    <script src="js/jquery-1.10.1.js" type="text/javascript"></script>  
    <script src="js/jquery.mobile-1.3.1.js" type="text/javascript"></script>
    <link href="css/Global.css" rel="stylesheet" />
    <script>
    /*********Page bind evnet --start--********/
            $(document).bind("pageinit", function () {

             $("#login").unbind("click").click(function () {
                                Login();
                        });
        });
    /*********Page bind evnet --Ends--********/


     var Type;
                    var Data;
                    var Url;
                    var DataType;
                    var ContentType;
                    var ProcessData;
                    var Method;
                    jQuery.support.cors = true

                  function Login() {
                        Type = "POST";
                        Url = "/login";                        
                        Data = '{}';
                        DataType = "JSON";
                        ContentType = "application/json; charset=UTF-8";
                        ProcessData = true;                        
                        CallLoginService();
                    }

                function CallLoginService() {                       
                        $.ajax({
                            type: Type,
                            data: Data,
                            dataType: DataType,
                            processData: ProcessData,
                            url: Url,
                            contentType: ContentType,
                            crossDomain: true,
                            success: function (jsonObj) {

                                if (jsonObj.GetLoginResult[0].Status == "true") {                                  
                                    $(location).attr('href', 'City.html');                                    
                                }
                                else if (jsonObj.GetLoginResult[0].Status == "Invalid username") {
                                    ShowErrorMsg(jsonObj.GetLoginResult[0].Message, '#alertcontainer1');
                                }
                                else {
                                    ShowErrorMsg(jsonObj.GetLoginResult[0].Message, '#alertcontainer1');
                                }
                            },
                            error: function (response) {
                                CheckNetwork();
                            }
                        });
</script>
    </head> 

<body>

    <div data-role="page" id="page2" data-theme="a">
            <div data-role="header">
                <p style="color:#13a5db;">&nbsp;Login</p>            
            </div>
            <div data-role="content">
             <div id="alertcontainer1" >
               <div data-role="controlgroup" data-type="horizontal">
                            <a data-role="button" id="login" data-theme="b">Login</a>
                            <a data-role="button" href="Registration.html"  data-transition="slide" data-theme="b">Register</a>
               </div>
             </div>
           </div>
          <div data-role="footer" data-position="fixed">
             <p>&nbsp;CopyRight &reg; 2013</p>
         </div>
        </div>

</body>
</html>

第2页 - (city.html)第二页

<html> 
   <head>
  <link href="css/jquery.mobile-1.3.1.css" rel="stylesheet"  type="text/css"/>
  <script src="js/jquery-1.10.1.js" type="text/javascript"></script>  
  <script src="js/jquery.mobile-1.3.1.js" type="text/javascript"></script>
   <script type="text/javascript">
     /*********Page bind evnet --start--********/
     $(document).bind("pageinit", function () {
       //code
   });
     /*********Page bind evnet --Ends--********/
  </head>
  <body>
  //code
  </body>
  </html>

0 个答案:

没有答案