标签：jquery javascript css jquery-mobile html

默认情况下,如果您使用jQuery Mobile的ajax导航来加载多页面模板html文件,它将无法正常工作,只会加载第一页.

一种方法是使用rel =“external”,但它在手机或平板电脑中效果不佳……(它应该有动画！)

有没有更好的方法？如何使用jQuery Mobile ajax导航完全加载多页模板html？

解决方法:

您可以使用编程方式将页面加载到DOM中

pageContainerElement.page({ domCache: true });

DOM缓存的缺点是DOM会变得非常大,导致某些设备出现速度减慢和内存问题.如果启用DOM缓存,请注意自己管理DOM并在一系列设备上进行彻底测试.

这是链接：http://jquerymobile.com/test/docs/pages/page-cache.html

更新1

您可以将该代码放在一个单独的文件中,即custom-code.js,并在加载jQuery之后将其放入标题中,但是在加载jQuery Mobile之前.

因此,如果您的页面容器如下所示：

<div data-role="page" data-theme="a" data-dom-cache="false" class="page blog-post">

你会把div.page({domCache：true});然后在你拉入jQuery和jQuery mobile的所有页面的头部,它看起来像这样：

// Pull in jQuery
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
// Pull in your custom jQuery Mobile rules/scripts
<script src="../path/to-file/custom-code.js"></script>
// Pull in jQuery Mobile
<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>

更新2

上面的代码将缓存该特定页面.如果要将所有页面加载到DOM中,在custom-code.js文件中,请放置此代码并为要加载到DOM中的每个页面单独指定(每个页面一个实例)：

$.mobile.loadPage( pageUrl, { showLoadMsg: false } );

Prefetching pages naturally creates additional HTTP requests and uses
bandwidth, so it’s wise to use this feature only in situations where
it’s highly likely that the prefetched page will be visited.

此外,如果要预先获取当前页面上链接的所有页面,只需将数据预取添加到链接即可.

例如：

<a href="page_2.html" data-prefetch>Link to other page</a>

标签：jquery,javascript,css,jquery-mobile,html
来源： https://codeday.me/bug/20190620/1248706.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。