先看下面的index.html中的一段代码

不加预加载

<footer class="footer" data-role="none">
	<a href="http://www.mamicode.com/#" class="current" data-role="none" class="ui-btn-active">test</a>
	<a href="http://www.mamicode.com/#" data-role="none">test</a>
        <a href="http://www.mamicode.com/a.html" data-role="none">test</a>
</footer>

加预加载

<footer class="footer" data-role="none">
	<a href="http://www.mamicode.com/#" class="current" data-role="none" class="ui-btn-active">test</a>
	<a href="http://www.mamicode.com/#" data-role="none">test</a>
        <a href="http://www.mamicode.com/a.html" data-prefetch="true" data-role="none">test</a>
</footer>

执行index.html的时候查看Google Chrome Console

发现多了这个

XHR finished loading: GET "http://xxxxx:8080/xxx/xxxx/new/grzx.html". 

而且查看Google Chrome Elements上多了

可见，预加载应该就是将当index.html加载完之后，就将grzx.html中的data-role="page" div所包含的元素全部预先加载到index.html页面中。这样页面切换的时候就将当前page隐藏，将目的page显示

关于jquerymobile的预加载