Question

我正在创建一个简单的词汇表页面（目前用于韩语 - 英语）。所有卡都保存在localStorage中。我正在使用带有多个页面模板的jQueryMobile，如下面的代码所示：

<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加载（流程中的第三个镜头），并且在我回来后（上次拍摄）完全没问题。任何人都可以帮我解决这个错误。此外，我很乐意获得一些性能提示，因为我的目标是在移动电话中使用它。

jQuery Mobile：CSS不会在第一页加载时呈现，而是从第二次加载

0 个答案: