使用javascript的jQuery移动启动画面 [英] jquery mobile splash screen with javascript
问题描述
我试图避免在启动屏幕上使用它，因为它不能在所有设备上运行，并且由于其他原因:
I'm seeking to avoid using this for the splash screen, because it does not work on all devices and for other reasons:
<link rel="apple-touch-startup-image" href="img/splash.png" />
因此，我尝试使用它，它可以正常工作，直到它滑入新页面，然后再次将其视为初始屏幕(例如，，当计时器到期时，它变为空白-在这种情况下为4秒).如何停止/限制这种行为，以便changePage仅保留在初始页面中?
So I'm trying to use this instead and it works fine until it slides into a new page, which is then treated like the splash screen again (e.g. it goes blank when the timer expires - in this case 4 seconds). How can I stop/restrict this behavior, so that changePage remains contained in splash page only?
<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>
推荐答案
这是我在想的好主意.使用单页而不是多页(multiple data-role = page).对于index.html或index.php或其他.放置您的启动页面.我稍后将解释其原因.
Good idea here is what I'm thinking. Use single pages instead of multi page(multiple data-role=page). For index.html or index.php or whatever. Put your splash page. The reason for this I will explain later on.
index.html
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
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更加精简.我希望这会有所帮助.
Ok so I did it this way because lets say you have navigation menu and you want to send people back to home page. You won't have to show the splash page again. You can just link to home.html. Also splitting up your pages helps keep the dom leaner. I hope this helps.
这篇关于使用javascript的jQuery移动启动画面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
