javascript - 应用程序在呈现Jquery Mobile之前显示无样式的HTML

我正在下面的示例代码中向我的应用程序动态添加标记。

$(document).bind("pagechange", function (event, ui) {
  var header = '<h3>' + appNames[i] + '</h3>';

        var ulHeader = '<ul data-role="listview" id="myAppsGridTable" data-inset="true">';

..
   $('.myBodyContent', ui.toPage).append(collapse + header + ulHeader + entire_list + '</ul>' + '</div>');
    $('#NicksPage').trigger('create');

});

我在Default.aspx页中对此页进行了引用，而在母版页中对jquery mobile进行了引用。当您导航到Default时，用户会看到原始的未样式化html添加到页面中，然后出现闪烁，并且出现了jquery移动样式。无论如何，我可以摆脱在添加jquery移动样式之前向用户显示的未样式化html吗？

这是我的母版页的副本:

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="UserMobile.master.cs" Inherits="User.Mobile.UserMobile" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head id="Head1" runat="server">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="Css/jquery.mobile.custom.structure.min.css" rel="stylesheet" type="text/css" />
    <link href="Css/jquery.mobile.custom.theme.min.css" rel="stylesheet" type="text/css" />

    <asp:ContentPlaceHolder ID="HeadContent" runat="server">
    </asp:ContentPlaceHolder>
</head>

<body>

<div data-role="page" data-theme="b" id="NicksPage">

    <div data-role="header" data-position="fixed" data-theme="b">

         <asp:ContentPlaceHolder ID="TopHeaderContent" runat="server"></asp:ContentPlaceHolder>


    </div><!-- /header -->

    <div data-role="content" class="myBodyContent">

 <asp:ContentPlaceHolder ID="MainContent" runat="server"></asp:ContentPlaceHolder>

    </div><!-- /content -->

    <div data-role="footer" data-position="fixed" data-theme="b">
    <asp:ContentPlaceHolder ID="FooterContent" runat="server"></asp:ContentPlaceHolder>


    <input type="hidden" id="collapse_value" value="false" />
    </div><!-- /footer -->

</div><!-- /page -->

   //Combined jquery 1.8 and jquery mobile files in one
   <script src="Js/JQ_JQM_combined.js" type="text/javascript"></script>

    //Makes ajax calls to get data
    <script src="Js/UserMobile.js" type="text/javascript"></script>

    <script type="text/javascript">
        $(document).ready(function () {

            // disable page transitions
            $.mobile.ajaxEnabled = false;
            $.mobile.defaultPageTransition = 'none';
        });

    </script>
     <asp:ContentPlaceHolder ID="ScriptContent" runat="server"></asp:ContentPlaceHolder>

</body>

</html>

甚至首页也存在闪烁问题，该问题会使其呈现为未样式化，然后在经过一段时间正确地样式化为jquery mobile之后。

<%@ Page Title="" Language="C#" MasterPageFile="~/Mobile/UserMobile.Master" AutoEventWireup="true" CodeBehind="Home.aspx.cs" Inherits="User.Mobile.Home" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="TopHeaderContent" runat="server">
    <h1>
        Applications</h1>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="MainContent" runat="server">
<div data-role="controlgroup">
<a href="MyStuff.aspx?name=nick&id=1234" data-role="button">My Stuff</a>
<a href="Employees.aspx?name=nick&id=1234" data-role="button">Employees</a>
<a href="list.aspx?name=nick&id=1234" data-role="button">List</a>

</div>


</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="FooterContent" runat="server">
    <div class="lines">
        <div class="footerCopyrightContainer">
            <div class="footerCopyright">
                &copy;2012 NICK ALL RIGHTS RESERVED.</div>
        </div>
    </div>
</asp:Content>

我更改了代码以反射(reflect)您的 fiddle 示例，但仍然出现闪烁。但是“未样式化为样式闪烁的时间较短，用户仍然可以在移动浏览器中看到未样式化的页面。您能看看我如何设置它吗？我丢失了什么吗？

$(document).bind("pagecreate", function (event, ui) {

    //gets params needed from querystring
    arrQrStr = getQueryStringParams();
    name = arrQrStr["name"];
    id = arrQrStr["id"];

});


$(document).delegate('div[data-role=page]', 'pagebeforeshow', function (e, data) {

    var employees = null;

    //returns string of html needed
    employees = getData(name, id);

    $('.myBodyContent', this).html(employees);

    $(this).trigger('create');

});

getData Ajax调用

 $.ajax({
        type: "POST",
        url: "MobileService.svc/REST/GetData",
        contentType: "application/json; charset=utf-8",
        data: JSON.stringify({ id: id}),
        dataType: "json",
        async: false,
        success: function (msg) {

问题来自于此:

  <script type="text/javascript">
      $(document).ready(function () {


          // disable page transitions
          $.mobile.ajaxEnabled = false;
          $.mobile.defaultPageTransition = 'none';



      });


    </script>

如果我将其从母版页中取出，闪烁会消失，它可以在页面上正常显示，但不会显示数据。删除此脚本会中断ajax调用，并且jquery移动事件不会参与(我不确定为什么)

最佳答案

听起来您似乎误解了ajax enabled设置的工作原理。

默认情况下，此设置为启用状态，当您链接到另一个页面时，JQM会在链接页面上找到它的第一个JQM页面(data-role="page")(因此您不能链接到multipage文档)并对其进行增强(初始化所有JQM小部件)，然后将其附加到当前页面的DOM。当JQM执行此操作时，它仅拉入JQM页面，而该页面上没有其他内容(因此，第二页won't上的所有脚本和样式均无效)。解决此问题的方法是将所有脚本都显示在当前主页中。如果要执行此操作，您需要注意的一件事是，您最终可能会得到多个具有相同id的页面(实际上，在当前设置中，您肯定会有重复的ids)，因此您可能想通过class选择它们。

另一方面，将ajax enabled设置为false时，它的行为就像常规链接一样，在这种情况下，将加载整个页面，如果您的JQM脚本位于底部，则在加载之前，它将无法增强DOM，这就是为什么您会看到闪烁。

作为补充，page transistions are only available if ajax启用is set to true`。

综上所述，除非您有理由不这样做，否则应将ajax enabled设置为true，并在主页上包含相关脚本。如果需要将ajax enabled设置为false，请尝试将jQuery脚本放在 header 中，以便它们在DOM其余部分之前加载。

或者，您可以做的是隐藏容器元素，在其中添加html，然后在完成后显示它，例如

的CSS

.displayNone { display: none; }

的HTML

 <div data-role="content" class="myBodyContent displayNone">
      <asp:ContentPlaceHolder ID="MainContent" runat="server"></asp:ContentPlaceHolder>
    </div>

 $('.myBodyContent', this).html(employees);
    $(this).trigger('create');
    $('.myBodyContent', this).reomveClass('displayNone');