jQuery Mobile的闪屏使用javascript(jquery mobile splash

我在寻找避免使用此闪现屏幕，因为它不会在所有设备和其他原因的工作：

<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>

Answer 1:

这里好主意是我在想什么。使用单页，而不是多页（多个数据角色=页）。对于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精简。我希望这有帮助。

Answer 2:

<link rel="apple-touch-startup-image" href="img/splash.png" />

的确只为苹果的移动设备。

一个真正的启动画面应该只在那里向你展示一个漂亮的图片，而你等待。它的目标不是让你等待真正原因。在你的情况下，它采取4秒了解用户的生活只是为了让它看起来很酷。

我已修改了代码，并把它放在这的jsfiddle ：你会看到现在的工作。对于溅射屏幕采取全宽度/高度编辑的CSS以除去余量。我已经设置定时器以2秒，那是绰绰有余，我认为。

文章来源: jquery mobile splash screen with javascript