我正在寻求避免在启动画面中使用它,因为它不适用于所有设备和其他原因：
<link rel="apple-touch-startup-image" href="img/splash.png" />
所以我试图使用它,它可以正常工作,直到它滑入新页面,然后再次像启动屏幕一样处理(例如,当计时器到期时它变为空白 – 在这种情况下为4秒).如何停止/限制此行为,以便changePage仅包含在启动页面中？
<body>
<div data-role="page" id="splash">
<div class="splash">
<img src="startup.jpg" alt="startup image" />
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$(function() {
setTimeout(hideSplash,4000);
});
function hideSplash() {
$.mobile.changePage("#home","fade");
}
});//]]>
</script>
</div>
</div>
<div data-role="page" id="home">
<div data-role="header" data-backbtn="false">
<h1></h1>
</div>
<div data-role="content">
</div>
</div>
</body>
解决方法
这里好主意是我的想法.使用单页而不是多页(多个data-role = page).对于index.html或index.PHP或其他什么.把你的启动页面.我之所以会这样解释原因.
index.html
<head>
<!-- First include all jquery stuff -->
<script src="app.js"></script><!-- external script because we can just include it in every page -->
</head>
<body>
<div data-role="page" id="splash">
<div class="splash">
<img src="startup.jpg" alt="startup image" />
</div>
</div>
</body>
app.js
$(document).on('pageinit','#splash',function(){ // the .on() method does require jQuery 1.7 + but this will allow you to have the contained code only run when the #splash page is initialized.
setTimeout(function(){
$.mobile.changePage("home.html","fade");
},4000);
});
好的,所以我这样做是因为我们说你有导航菜单,你想把人们送回主页.您不必再次显示启动页面.你可以链接到home.html.分割你的页面有助于保持dom更精简.我希望这有帮助.
