Question

我正在寻求避免在启动画面中使用它，因为它不能在所有设备上运行，并且出于其他原因：

<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

这里好主意是我在想什么。使用单页而不是多页（多个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更精简。我希望这会有所帮助。

Answer 2

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

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

一个真正的启动画面应该只是为了向你显示一个漂亮的图片而你在等待。它的目标不是让你等待真正的理由。在你的情况下，它只需要用户生命中的4秒就可以让它看起来很酷。

我修改了您的代码并将其放入此jsfiddle：您会看到它现在正常运行。要使启动画面占据整个宽度/高度，请编辑css以删除边距。我把计时器设置为2秒，这比我想象的还要多。

用javascript jquery移动启动画面

2 个答案: