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 などの場合。スプラッシュ ページを配置します。この理由については、後で説明します。

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 をスリムに保つことができます。これが役立つことを願っています。

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

確かにアップルのモバイルデバイス専用です。

本物のスプラッシュスクリーンは、待っている間に素敵な画像を表示するためだけにあるべきです。その目標は、本当の理由であなたを待たせることではありません。あなたの場合、見た目をかっこよくするだけで、ユーザーの生活から 4 秒かかります。

私はあなたのコードを修正し、このjsfiddleに入れました。今すぐ動作することがわかります。スプラッシュスクリーンが全幅/高さになるようにするには、css を編集して余白を削除します。タイマーを 2 秒に設定しました。これで十分だと思います。

于 2012-05-26T08:41:26.683 に答える