use*_*581 7 splash-screen jquery-mobile
我正在寻求避免在启动画面中使用它,因为它不适用于所有设备和其他原因:
<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更精简.我希望这有帮助.
<link rel="apple-touch-startup-image" href="img/splash.png" />
确实只适用于苹果移动设备。
真正的启动画面应该只是在您等待时向您展示一张漂亮的图片。它的目标不是让你等待真正的原因。在你的例子中，仅仅为了让它看起来很酷就花费了用户 4 秒的时间。
我已经修改了您的代码并将其放入此jsfiddle中：您现在会看到它可以工作。为了使初始屏幕具有完整的宽度/高度，请编辑 css 以删除边距。我把计时器设置为2秒，我认为这已经足够了。
| 归档时间： |
|
| 查看次数： |
19347 次 |
| 最近记录： |