带有javascript的jquery移动启动画面答案

【问题标题】：jquery mobile splash screen with javascript带有javascript的jquery移动启动画面
【发布时间】：2012-05-26 04:27:52
【问题描述】：

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

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

【问题讨论】：

标签： jquery-mobile splash-screen

【解决方案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 更精简。我希望这会有所帮助。

【讨论】：

感谢您的反馈 codaniel。很有帮助。
也适用于单页

【解决方案2】：

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

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

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

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

【讨论】：

虽然从品牌的角度来看，这 4 秒会很棒，也可以让你的网络应用感觉更加原生。哦，顺便说一句 .live() 方法已被弃用。它存在许多已知问题。见api.jquery.com/live
感谢您的反馈 - 非常感谢。