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');

});

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>

$（文档）.ready（函数（）{
//禁用页面转换
$.mobile.ajaxEnabled=false；
$.mobile.defaultPageTransition='none'；
});

---

如果我把它从母版页中去掉，闪烁就会消失，它可以很好地导航页面，但是数据不会显示出来。使用此脚本会中断ajax调用和jquery移动事件（我不知道为什么）

尝试使用

pagebeforeshow

而不是

pagechange

。像这样：

$(document).delegate('div[data-role=page]', 'pagebeforeshow', function(e, data){
    var toPage = this; // this references the page that is about to be shown
    // Add items to the page
});

pagebeforeshow

事件在实际转换动画开始之前，在转换到的“toPage”上触发。这允许您在向用户显示之前添加元素和样式

我希望这有帮助

编辑

---

下面是一个已实施建议修复的示例。

尝试将jquery移动源代码脚本放在头部，而不是正文的末尾

---

这是我唯一能保证用户永远不会看到未分类html的方法。

听起来您误解了设置的工作方式

默认情况下，此设置处于启用状态，当您链接到另一个页面时，JQM将在链接页面上找到的第一个JQM页面（

data role=“page”

）拉入该页面（因此您无法链接到

多页面

文档），并对其进行增强（初始化所有JQM小部件），然后将其附加到当前页面的DOM。当JQM执行此操作时，它只会拉入JQM页面，而不会拉入该页面上的任何其他内容（因此第二个页面上的任何脚本和样式都会产生任何影响）。处理这个问题的方法是将所有脚本放在当前主页中。如果这样做，您需要注意的一件事是，您可能会得到多个具有相同

id

的页面（实际上，在当前设置中，您肯定会有重复的

id

），因此您可能希望改为通过

class

选择它们

另一方面，如果启用了

ajax

将其设置为

false

，它的行为就像一个常规链接，在这种情况下，将加载整个页面，如果JQM脚本位于底部，那么在加载之前，它将无法增强DOM，这就是您看到闪烁的原因

作为一个辅助点，只有当ajax enabled

设置为

true`时，

页面传输才可用

总之，除非你有理由不这样做，否则你可能应该将启用ajax的
设置为true，并在主页上插入相关脚本。如果需要将启用ajax的
设置为
false
，请尝试将jQuery脚本放在标题中，以便它们在DOM的其余部分之前加载

另外，您可以做的是隐藏将附加html的容器元素，然后在完成后显示它，例如

CSS

HTML

因此，在我的代码中，我将ui.toPage更改为toPage here$（'.myBodyContent'，ui.toPage），并订阅您的事件，如图所示？@NickLaMarca您能看看这个JSFIDLE和上面实现的修复程序吗：。你看这行不行，如果不修改fiddle来重现您的错误，这样我就可以提供答案。谢谢。我在问题中添加了一个带有问题的页面/母版页
getData
函数是否使用类似AJAX的异步过程？它使用AJAX，但async设置为False使用同步请求可能会产生闪烁。与其使用AJAX请求获取数据，为什么不链接到使用服务器端语言获取数据并创建必要页面的外部文档呢？感觉你把问题复杂化了…我甚至在主页上看到了没有返回数据的闪烁。我不熟悉WCF服务的工作方式，但是如果你可以通过JS获取数据，那么你可以通过任何服务器端语言获取数据。然后使用服务器端语言创建实际的HTML文档，jQueryMobile将完成其余工作。如果您正在创建一个同步AJAX请求，但没有获取数据，那么您仍然会“冻结”客户机的浏览器。这就是同步请求的问题所在，当它运行时，不会发生任何其他事情，因此用户觉得页面已经冻结，直到它完成。我尝试了闪烁仍然存在，它必须以某种方式连接到打开和关闭doc ready脚本，这反过来会破坏jquery移动事件
 $.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>

$(document).delegate('div[data-role=page]', 'pagebeforeshow', function(e, data){
    var toPage = this; // this references the page that is about to be shown
    // Add items to the page
});

.displayNone { display: none; }

 <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');