Я использую phonegap с jquery, jQuery mobile min и пользовательский код для прокрутки страницы для создания приложения. Это в основном одно главное меню, приводящее к десяти подменю, что приводит к приблизительно 200 статическим страницам html.jquery mobile single page size cap
Я объединил все это в одну страницу, чтобы не пришлось перезагружать скрипты при каждой смене страницы. Сначала это работало, но по мере того, как я продолжал добавлять страницу, после определенного момента на странице ни одна из ссылок не работает, ничего не происходит, когда их нажимают.
Я уверен, что это не проблема с html для этих ссылок, каждая ссылка после этой точки терпит неудачу. Если я вырезаю/вставляю ссылку на начало документа, она работает нормально, но затем следующая строка после ее первоначальной позиции больше не работает.
В момент его остановки страница составляла приблизительно 250kb в размере и 3500 строк кода.
Я временно исправил его, создав 10 отдельных страниц, по одному для каждого подменю, которое действительно работает, но представляет свои проблемы, которые я хочу избежать, если смогу.
Есть ли в телефоне, jQuery или jQuery mobile min колпачки на том, насколько большой может быть одна страница, прежде чем они начнут игнорировать оставшуюся часть кода? И есть ли что-нибудь, что я могу сделать, чтобы обойти это?
Это скрипт пользовательского скроллинг Я использую:
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);
}
});
});
И это то, что 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> 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>
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"> Link to First Submenu</a></p>
<p class="line"><img src="img/redline.png" width="100% of window";></p>
И потом:
<div id="pageplot" data-role="page" data-prev="#page1" data-next="#pagesubmenu2"><div class="wrapper"><ul data-role="listview" data-inset="true"><h2>
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"> First Plot Page</a></p>
<p class="line"><img src="img/line.png" width="100% of window";></p>
И потом:
<div id="page01001" data-role="page" data-prev="" data-next="#page01002"><div class="wrapper"><ul data-role="listview" data-inset="true"><h2>
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>
Чтобы убедиться, что вы не переусердствовали, вы запускаете свой html через html-валидатор? –
Это 250kb _on disk_ или 250kb? – Mathletics
Хорошо, оказывается, я идиот. Потратив часы на то, чтобы найти исправление, и проверить и перепроверять мой html, оказалось, что, да, я испортил html-тег. Спасибо Дженнифер за то, что я вернулся и снова посмотрел. Извините за потраченное время! – user5513718