如何在Phonegap中只加载一次js库

如何在Phonegap中对多个HTML页面只存档加载一次js库?

我有这个项目:

./index.html
./FoderA/index.html
./FoderB/index.html
....

和每个index.html中我使用cordova2.2.0.js，但性能会降低一点。我可以加载JS库(cordova, jquerymobile， ....)一次，例如当./index.html应用程序启动?

如果你导航到一个新页面，你需要重新加载所有的JavaScript，所以避免这种情况的方法是不要导航到一个新页面。您可以使用Ajax来加载第二个页面并将其添加到DOM中。看看这篇不错的文章，Bryce在其中滚动了他自己的loadPage功能。

其他JavaScript框架，如jQuery Mobile和Dojo也允许你这样做，只是你需要加载这些框架。

你可以试试这个框架。下面是我的一个项目的index.html示例:

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Dark Maze</title>
<script src="Scripts/cordova/cordova-2.2.0.js" type="text/javascript"></script>
<script src="Scripts/jquery/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="Scripts/novas/nova.all.js" type="text/javascript"></script>
<script src="Scripts/maze/maze.data.js" type="text/javascript"></script>
</head>
<body>
<div id="themes">
    <link href="themes/nova.ui.core.css" rel="stylesheet" />
    <link href="themes/nova.ui.content.css" rel="stylesheet" />
</div>
<div id="body">
    <script language="javascript" type="text/javascript">
        $(document).ready(function () {
            nova.application.start("home.html");
        });
    </script>
</div>
</body>
</html>

实际上，所有其他页面都将通过ajax调用加载到div#body中。其他页面不需要包含

或，只需要从

开始。

home:

<style>
#content {
    width: 100%;
    min-height: 100%;
    position: relative;
}
.content-w1 {
    padding: 15px;
    padding-bottom: 20px;
}
#links {
    position: absolute;
    bottom: 0px;
    width: 100%;
    text-align: center;
    line-height: 20px;
}
.content-w1 h1 {
    background-color: #FFFCE5;
    text-align: center;
    margin: 0px;
    padding: 10px 0px;
    color: #30C5F2;
    font-size: 25px;
    font-weight: bold;
    margin-bottom: 20px;
    border-radius: 5px;
}
</style>
<div id="content">
<div class="content-w1">
    <div class="logo-home"></div>
    <ul class="color-blocks">
        <li>Never</li>
        <li>Lose</li>
        <li>Your</li>
        <li>Hope</li>
        <li>.</li>
    </ul>
    <ul class="menu">
        <li id="linkLevels">Choose Level</li>
        <li id="linkHelp">Help</li>
        <li id="linkQuickStart">
            Quick Start
            <small id="quickstartLevel">Level 1</small>
        </li>
    </ul>
    <div class="challenge">
    </div>
</div>
<div id="links">
    &copy;2012, NovaSoftware.com, 
    <i>v1.0</i>
</div>
</div>
<script language="javascript" type="text/javascript">

nova.application.currentPage.onLoaded(function () {
    function init() {
        if (window.DbService == undefined) {
            return;
        }
        var service = new DbService();
        var quickStart = 1;
        service.init(function () {
            service.getQuickStartLevel(function (level) {
                $("#quickstartLevel").html("Level " + level);
                quickStart = level;
            });
        });
        nova.touch.bindClick("#linkQuickStart", function () {
            alert("linkQuickStart");
            var page = new nova.Page("pages/game.html");
            page.level = quickStart;
            nova.application.gotoPage(page);
        });
        nova.touch.bindClick("#linkLevels", function () {
            nova.application.gotoPage("pages/levels.html");
        });
        //nova.application.gotoPage("pages/levels.html");
    }
    init();
});

</script>

你应该使用Ajax将所有js库和css加载到DOM

相关内容

最新更新

热门标签：