7

我试图避免将其用于启动画面，因为它不适用于所有设备以及其他原因：

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

2 回答 2

9

好主意就是我的想法。使用单页而不是多页（多个数据角色=页面）。对于 index.html 或 index.php 或其他什么。把你的启动页面。其原因我稍后会解释。

索引.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>

应用程序.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 更精简。我希望这有帮助。

于 2012-05-26T10:25:43.170 回答
3 
<link rel="apple-touch-startup-image" href="img/splash.png" />

确实只适用于苹果移动设备。

真正的闪屏应该只在您等待时向您展示精美的图片。它的目标不是让你等待真正的原因。在您的情况下，为了让它看起来很酷，您的用户需要花费 4 秒的时间。

我已经修改了你的代码并将它放在这个jsfiddle中：你会看到它现在可以工作了。为了让启动画面占据整个宽度/高度，请编辑 css 以删除边距。我已经将计时器设置为2s，我认为这已经足够了。

于 2012-05-26T08:41:26.683 回答