jQuery Mobile：CSS不会在第一页加载，但从第二次渲染

我正在创建一个简单的词汇页面（目前为韩文 - 英文）。所有的卡都保存在localStorage中。我使用jQueryMobile有多个页面模板如下图所示代码：jQuery Mobile：CSS不会在第一页加载，但从第二次渲染

<html> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>Card Reader</title> 

    <link rel="stylesheet" href="jquery.mobile/jquery.mobile-1.1.0.css" /> 
    <link rel="stylesheet" href="docs/assets/css/jqm-docs.css" /> 
    <link rel="stylesheet" href="docsdemos-style-override.css" /> 
    <script type="text/javascript" src="custom_codes.js"></script> 
    <script type="text/javascript" src="jquery.mobile/jquery-1.7.2.min"></script> 
    <script type="text/javascript" src="jquery.mobile/jquery.mobile-1.1.0.js"></script> 
    <script> 
    $('document').ready(function(){ 
    var list = JSON.parse(localStorage.getItem('cardList')); 
    if(list==null){ 
     populateCards(); 
     list = JSON.parse(localStorage.getItem('cardList'));     
    } 
    $cardList=$('#cardList'); 
    $cardList.empty();  
    $.each(list,function(i, value){ 
     $newItem = $('<li />');                  
     $link = $('<a data-transition="slidefade" href="#wordListPage">'+value+'</a>'); 
     $link.attr('onClick',"loadWordList('"+value+"','wordList"+i+"')"); 
     $newItem.append($link); 
     $cardList.append($newItem);    
    });  
});  

function loadWordList(cardName,cardId){ 
    var wordList = JSON.parse(localStorage.getItem(cardId)); 
    if(wordList==null){ 
     alert('no words in the list');    
     return; 
    } 
    $wList=$('#wordList');   
    $wList.empty(); 
    $list = $('<ul/>'); 
    $list.attr('data-role','listview'); 
    $.each(wordList,function(i, value){ 
     $newItem = $('<li />'); 
     $newItem.append('<h3>'+value['word']+'</h3>');    
     $newItem.append('<p>'+value['definition']+'</p>');   
     $list.append($newItem).trigger("create"); 
    });  
    $wList.append($list).trigger('create');  
    $('#cardTitle').html(cardName);  
} 
</script> 

</head> 
<body> 

<div data-role="page" id="welcomePage"> 
    <h2> 
     Welcome to Korean Learner 
    </h2> 
    <a data-transition="slidefade" href="#cardsListPage">   
     Load Cards   
    </a> 
</div> 

<div data-role="page" id="cardsListPage"> 
    <div data-role="content"> 
     <ul id="cardList" data-role="listview"> 
     </ul> 
    </div> 
</div> 

<div data-role="page" id="wordListPage"> 
    <div data-role="header" class="ui-header ui-bar-b" data-position="fixed"> 
     <a data-rel="back">Back</a> 
     <h1 id="cardTitle" >Card List</h1> 
    </div> 
    <div data-role="content" id="wordList">   

    </div> 
</div> 
</body> 
</html>

当我检查这个浏览器，输出流量，如下图：

Link to image, as I cannot post here being new user

我已经使用JavaScript来加载cardList和wordlist。 populateCards（）函数是custom_codes.js中的一个函数，它只将一个卡片数组加载到localstorage中。我现在唯一遇到的错误是，wordList页面在第一次加载时没有CSS加载（第三次弹出流），并且在我回来（上次弹出）后完全正常。任何人都可以帮我解决这个错误。此外，我会很高兴获得一些性能提示，因为我的目标是用于手机。

来源

2012-11-07 Sunil

欢迎JQM，不像jQuery的你不使用$(document).ready了对于初学者（http://jquerymobile.com/test/docs/api/events.html）你现在监听pageinit和pageshow事件，可能是你的问题是，你的JS运行JQM触发pageshow这之后将立即触发后当您浏览回到页面pageinit

pageshow再火，这就是为什么它是工作，当你回去

当JQM触发pageshow这是当它通过并应用您从您的API使用的CSS。但是当这些被解雇的时候，你从未添加过元素，所以他们没有被jQM所打造。

如果在通过异步调用之后添加了元素，那么您也需要手动调用.listview('refresh')。

我也有一个旧的答案在我说明我如何安排我的JS是很容易理解的多页环境how to organize ur jQM JS

而且你使用的是单页模板如果welcomePage /调试的和cardsListPage在同一个文件中。

多页面模板是当你在一个单独的文件中有每个页面时，我认为更好，因为如果你关心性能，一开始加载的数据少。但是您需要遵循我在链接或自己开发的解决方案中使用的JS设置，但基本上无论您从哪个页面开始，都要加载所有JS 一次。并处理每个pageinit/pageshow事件，并有一些方法可以确定您的多页面模板中的哪个页面。

您使用IDS但是，这并不正常工作，因为在多页面模板JQM可以加载任意网页超过一次（到一个单一的DOM，检查调试器看 - 假设domCaching上），好吧，我猜你仍然可以通过检查.attr('id')知道它是什么网页，但这是误导，因为如果你做了$('#cardsListPage')，你可能会得到许多元素之一。

希望能让你得到开始。

来源

2012-11-07 07:28:49

非常感谢:)，我会按照您的建议尝试，并希望它能正常工作。 – Sunil

jQuery Mobile：CSS不会在第一页加载，但从第二次渲染

回答

相关问题