Question

我正在使用phonegap构建制作应用，并且需要很长时间才能加载。在启动时，它会显示黑屏几秒钟，然后显示我的网站的背景颜色，然后实际加载整页。

该应用程序是使用聚合物和jquery构建的，如果有人提示加载时间一般下降，我很好奇。（显示加载图标也是一种替代方案，我只是想知道是否有办法做到这一点，即使在启动时黑色也是如此。）

更新：这是我的index.html的代码。

`

<head>
    <title>Argon</title>
    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
    <script src="components/webcomponentsjs/CustomElements.js"></script>
    <script src="components/jquery-1.11.3.min.js"></script>
    <link rel="import" href="elements.html">
    <script>
        $(document).ready(function () {
            $("#status").hide();
            $("#post").hide();
            $("#reply").hide();
            $("#settings").hide();
            $(".send").hide();
            $(".save").hide();

        });
    </script>
    <script>
        $(function () {
            $(".home").click(function () {
                $("#reply").slideUp("slow");
                $("#status").slideUp("slow");
                $("#post").slideUp("slow");
                $("#settings").slideUp("slow");
                $(".send").hide();
                $(".save").hide();
                $("#main").slideDown("slow");
                $("#main2").slideDown("slow");
            });
            $(".reply").click(function () {
                $("#main").slideUp("slow");
                $("#main2").slideUp("slow");
                $("#status").slideUp("slow");
                $("#post").slideUp("slow");
                $("#settings").slideUp("slow");
                $(".save").hide();
                $(".send").slideDown();
                $("#reply").show("slow")
                $("#reply").slideDown("slow");
            });
            $(".status").click(function () {
                $("#main").slideUp("slow");
                $("#main2").slideUp("slow");
                $("#reply").slideUp("slow");
                $("#post").slideUp("slow");
                $("#settings").slideUp("slow");
                $(".save").hide();
                $(".send").slideDown();
                $("#status").show("slow")
                $("#status").slideDown("slow");
            });
            $(".post").click(function () {
                $("#main").slideUp("slow");
                $("#main2").slideUp("slow");
                $("#main2").slideUp("slow");
                $("#reply").slideUp("slow");
                $("#status").slideUp("slow");
                $("#settings").slideUp("slow");
                $(".save").hide();
                $(".send").slideDown();
                $("#post").show("slow")
                $("#post").slideDown("slow");
            });
            $(".settings").click(function () {
                $("#main").slideUp("slow");
                $("#main2").slideUp("slow");
                $("#reply").slideUp("slow");
                $("#status").slideUp("slow");
                $("#post").slideUp("slow");
                $(".send").hide();
                $(".save").slideDown();
                $("#settings").show("slow")
                $("#settings").slideDown("slow");
            });
        });
    </script>
</head>

<body>

    <!--If the icons aren't showing, remove the spaces!-->
    <paper-fab-menu icon="create" closeIcon="close" duration="0.3">
        <paper-fab-menu-item icon="reply" duration="0.3" class="reply"></paper-fab-menu-item>
        <paper-fab-menu-item icon="speaker-notes" duration="0.3" class="status"></paper-fab-menu-item>
        <paper-fab-menu-item icon="note-add" duration="0.3" class="post"></paper-fab-menu-item>
    </paper-fab-menu>

    <core-scroll-header-panel flex fixed="true">

        <core-toolbar>

            <paper-icon-button icon="home" class="home"></paper-icon-button>

            <span flex>Argon</span>

            <paper-icon-button icon="send" class="send"></paper-icon-button>
            <paper-icon-button icon="save" class="save"></paper-icon-button>
            <paper-icon-button icon="settings" class="settings"></paper-icon-button>

        </core-toolbar>

        <div id="main">

            <paper-shadow class="card" z="2">

                <h1>Getting Started With Argon</h1>
                <img src="logos/4000x4000.png" height="15%" width="15%">
                <br>
                <h2>Click the action button on the bottom-right to view posting options.</h2>
                <h3></h3>

            </paper-shadow>

            <paper-shadow class="card" z="2">

                <h1>Submit Feedback</h1>

                <h2>Tell me what you think!</h2>


                <paper-button>@AveryBMiller</paper-button>


                <br>
                <br>

                <a href=" http://www.averymiller.org ">
                    <paper-button>AveryMiller.org</paper-button>
                </a>
            </paper-shadow>



        </div>
        <div id="main2">
            <paper-shadow class="card " z="2 ">

                <h1>Rate Argon</h1>

                <h2>If you like the app, rate it in the Google Play store!</h2>

                <a href="http://play.google.com ">
                    <paper-button>Rate</paper-button>
                </a>

            </paper-shadow>
        </div>
        <div id="status">
            <paper-shadow class="card" z="2">

                <h1>Write Status</h1>

                <input type="text">
                <br>
                <br>

            </paper-shadow>
        </div>
        <div id="post">
            <paper-shadow class="card" z="2">

                <h1>Write Post</h1>

                <input type="text">
                <br>
                <br>




            </paper-shadow>
        </div>
        <div id="reply">
            <paper-shadow class="card" z="2">

                <h1>Write Reply</h1>

                <input type="text">
                <br>
                <input type="text" placeholder="http://www.averymiller.org">
                <br>
                <br>




            </paper-shadow>
        </div>
        <div id="settings">
            <paper-shadow class="card" z="2">

                <h1>Change Your API Key</h1>

                <input type="text">
                <br>

            </paper-shadow>
        </div>

    </core-scroll-header-panel>


</body>

`

加快PhoneGap中的加载时间

0 个答案: