大佬教程收集整理的这篇文章主要介绍了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,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加载(流程中的第三个镜头),并且在我回来后(上次拍摄)完全没问题.任何人都可以帮我解决这个错误.
此外,我很乐意获得一些性能提示,因为我的目标是在手机中使用它.
当您导航回页面时,页面显示会重新触发,这就是当您返回时它正在工作的原因
当jQM触发页面显示时,它会通过并应用您在其API中使用的任何CSS.但是当它被解雇时,你还没有添加元素,所以它们没有被jQM设计.
如果通过异步调用后添加元素,那么我认为你需要手动调用.listview(‘refresh’).
我还有一个较旧的答案,其中概述了我如何组织我的JS在多页面环境中易于理解/可调试how to organize ur jQM JS
如果welcomePage和cardsListPage在同一个文件中,您也使用单页模板.
多页模板就是当你将每个页面放在一个单独的文件中时,我认为这样更好,因为如果你担心性能的话,你在开始时加载的数据就更少了.但是你需要遵循我在我的链接或你自己的自己开发的解决方案中的JS设置,但是你基本上都试图加载所有的JS,无论你从哪个页面开始.并处理每个pageinit / pageshow事件,并有一些方法来确定您的多页模板的哪个页面.
你正在使用id但是效果不好因为在多页面模板中jQM可能会多次加载任何页面(进入一个DOM,请检查调试器以查看 – 假设domCaching已打开),我猜你还是通过检查.attr(‘id’)知道它是什么页面,但它有误导性,因为如果你做了$(‘#cardsListPage’),你可能会得到许多元素中的一个.
希望能让你开始.
以上是大佬教程为你收集整理的jQuery Mobile：CSS不会在第一页加载时呈现,而是从第二次加载全部内容，希望文章能够帮你解决jQuery Mobile：CSS不会在第一页加载时呈现,而是从第二次加载所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。