jQuery Mobile使用JavaScript制作启动画面

Question

jQuery Mobile使用JavaScript制作启动画面

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>

- user1418581

2个回答

3

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

这只适用于苹果移动设备。

真正的启动画面应该只是在您等待时展示一张漂亮的图片，而不是让您无端等待。在您的情况下，它只是为了好看而把用户4秒钟的时间浪费掉。

我已经修改了您的代码，并将其放在jsfiddle上：你会发现它现在可以正常工作。如果希望启动画面占满整个屏幕，请编辑CSS以去除边距。我将计时器设置为2秒，我认为这已经足够了。

- chrisben

2

那4秒钟对于品牌来说是非常好的，也可以让你的Web应用程序感觉更本地化。顺便说一下，.live()方法已经被弃用了。它有许多已知问题。请参见http://api.jquery.com/live/。 - codaniel

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- codaniel · Accepted Answer

一个好的想法是使用单个页面而不是多个页面（多个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更简洁。希望这可以帮到您。