jquery移动单页大小上限

Question

I using phonegap with jquery, jquery mobile min and a custom page swipe code to build an app. 我使用带jquery的phonegap，jquery mobile min和自定义页面滑动代码来构建应用程序。 It is basically one main menu, leading to ten sub-menus, leading to approx 200 static html pages. 它基本上是一个主菜单，导致十个子菜单，导致大约200个静态html页面。

I combined it all into one single page so that it didn't have to reload the scripts every page change. 我将它们全部合并到一个页面中，这样就不必每次更改页面都重新加载脚本。 This worked initially, but as I continued to add to the page, after a certain point in the page none of the links work, nothing happens when they are clicked. 这最初起作用，但是当我继续添加到页面时，在页面中的某个点之后没有任何链接工作，单击它们时没有任何反应。

I'm confident it's not a problem with the html for those links, every link after that point fails. 我相信这些链接的html不是问题，在那一点之后的每个链接都失败了。 If I cut/paste the link to the start of the doc it works fine, but then the next in line after it's original position no longer works. 如果我将链接剪切/粘贴到文档的开头它可以正常工作，但是在它原始位置之后的下一个不再有效。

At the point it stopped, the page was approx 250kb in size and 3500 lines of code. 在它停止的那一刻，页面大小约为250kb，代码为3500行。

I temporarily fixed it by creating 10 single pages, one for each submenu, which does work, but introduces it's own problems that I want to avoid if I can. 我通过创建10个单页来临时修复它，每个子菜单一个，这确实有效，但是如果可以的话，我会介绍它自己要避免的问题。

Do phonegap, jquery, or jquery mobile min have caps on how large a single page can be before they start to ignore the remainder of the code? phonegap，jquery或jquery mobile min是否会限制单个页面在开始忽略其余代码之前的大小？ And is there anything I can do to get around this? 我能做些什么来解决这个问题吗？

This is the custom scrolling script I am using: 这是我使用的自定义滚动脚本：

function navnext( next ) {
    $( ":mobile-pagecontainer" ).pagecontainer( "change", next, {
        transition: "none"
    });
}
function navprev( prev ) {
    $( ":mobile-pagecontainer" ).pagecontainer( "change", prev, {
        transition: "none",
        reverse: true
    });
}


$( document ).one( "pagecreate", "#page1", function() {
    // Handler for navigating to the next page
    // Navigate to the next page on swipeleft
    $( document ).on( "swipeleft", ".ui-page", function( event ) {
        // Get the filename of the next page. We stored that in the data-next
        // attribute in the original markup.
        var next = $( this ).jqmData( "next" );
        if ( next ) {
            navnext( next );
        }
    });
    // The same for the navigating to the previous page
    $( document ).on( "swiperight", ".ui-page", function( event ) {
        var prev = $( this ).jqmData( "prev" );
        if (prev) {
            navprev( prev );
        }
    });
});

And this is what the html looks like: 这就是html的样子：

<i></i><!DOCTYPE HTML>
<html>
<head>
<script src="js/jquery.js"></script>
<script src="js/jquery.mobile.min.js"></script>
<script src="js/jqueryswipegrey.js"></script>
<link rel="stylesheet" href="css/deck.css"></link>
</head>
<body>


<div class="title"><h1>&nbsp;App Title</h1><a href="#page1"><img class="home" src="img/home.png"></a></div>


<!-- -------------------------------MAIN MENU-------------------------------------------------------------------------------------------------- -->


<div id="page1" data-role="page" data-prev="#page1" data-next="#pagesub1"><div class="wrapper"><ul data-role="listview" data-inset="true"><h2>&nbsp;&nbsp;&nbsp;

                Main Menu

</h2></ul> <div data-role="content">




<font size="4">

   <p class="line"><img src="img/redline.png" width="100% of window";></p>
<p class="menu"> <a class="link" href="#pagesub1"><img class="smallcardplot" src="img/01001.jpg">&nbsp;&nbsp;&nbsp;Link to First Submenu</a></p>
   <p class="line"><img src="img/redline.png" width="100% of window";></p>

And then: 接着：

<div id="pageplot" data-role="page" data-prev="#page1" data-next="#pagesubmenu2"><div class="wrapper"><ul data-role="listview" data-inset="true"><h2>&nbsp;&nbsp;&nbsp;

                1st Submenu

</h2></ul> <div data-role="content">

<font size="4">

<p class="line"><img src="img/redline.png" width="100% of window";></p>
<p class="menu"> <a class="link" href="#page01001"><img class="smallcardplot" src="img/01001.jpg">&nbsp;&nbsp;&nbsp;First Plot Page</a></p>
   <p class="line"><img src="img/line.png" width="100% of window";></p>

And then: 接着：

<div id="page01001" data-role="page" data-prev="" data-next="#page01002"><div class="wrapper"><ul data-role="listview" data-inset="true"><h2>&nbsp;&nbsp;&nbsp;

                First Content Page

</h2></ul> <div data-role="content">

                <img src="img/01001.jpg" class="plotimg">  <ul data-role="listview" data-inset="true">


<p>A few lines of text for this page

</ul></div></div></div>

Answer 1

I'd messed up an html tag. 我弄乱了一个html标签。 Fixed now. 现在修复了。

jquery移动单页大小上限

问题描述

1 个解决方案

解决方案1
0 2015-11-02 02:27:20

jquery移动单页大小上限

问题描述

1 个解决方案

解决方案1 0 2015-11-02 02:27:20

解决方案1
0 2015-11-02 02:27:20