Javascript 在重定向到jquery之前，如何在jquery中预加载（缓存）外部页面？

我正在做一个phonegap应用程序。 我有一个index.html页面，带有一个登录按钮，可以重定向到网站应用程序

单击“登录”按钮时，我希望在页面运行时显示加载gif 正在缓存/预加载，并在完成时重定向到页面

---

如果您能提供一个脚本代码示例，我将不胜感激。

这是一个非常简单的示例：

使用css类操纵loader div的可见性并在页面之间切换

jQuery(document).ready(function ($) {
    $app = $('.app'),
    $pages = $('.page');

    $('.login').on('click', function () {
        $app.addClass('loading');

        $pages.removeClass('active').filter('.page-2').addClass('active');

        setTimeout(function () {
            $app.removeClass('loading');
        }, 500);
    });

    $('.logout').on('click', function () {
        $app.addClass('loading');

        $pages.removeClass('active').filter('.page-1').addClass('active');

        setTimeout(function () {
            $app.removeClass('loading');
        }, 500);
    });

    $app.removeClass('loading');
});

---

但如果您需要更复杂的解决方案，最好使用一些js框架、Knockout.js+一些js路由器或更强大的

我使用

元素完成了类似的任务。我的phonegap应用程序需要加载（本地）页面，可能需要通过jQuery进行修改。使用普通重定向（通过

window.location

）导致加载工件有两个原因：

图像在加载时出现

jQuery修改之前的页面状态瞬间闪烁

我解决了这个问题，将页面加载到一个不可见的

中，并使

只有在通过jQuery加载和修改后才可见。我认为有多种方法可以做到这一点，但我是通过

z-index

对

元素进行“杂耍”来实现的

我创建了一个带注释的小提琴，它稍微简单一些，并添加了一个加载微调器：

（给Umidbek的帽子贴士）

jQuery（文档）.ready（函数（$）{
$app=$（'.app'）；
//将行为附加到登录按钮。
$（'.login'）。在（'click'，函数（）{
$app.addClass（“加载”）；
//创建一个。
$iframe=$（''）；
//将的url设置为所需的重定向url。
//注意：URL必须在同一个域中，
//或者设置特殊的HTTP头以允许在内部进行渲染。
$iframe.attr（{src:'http://doc.jsfiddle.net/'});
//添加我们刚刚创建的DOM。
$iframe.appendTo（$（'body'））；
//加载后，删除包含登录的按钮
//并加载微调器以显示。
$iframe.load（函数（）{
$（'.app'）.remove（）
});
});
});

我甚至不确定您是否需要使用任何jQuery或Javascript，除非您希望动态处理许多这样的情况。您可以查看HTML5预取，以便在登录后预加载和缓存下一页。因此，在文档的开头添加：

<link rel="prefetch" href="http://example-site/next_page_after_login.html" />

---

你可以在David Walsh的博客上阅读更多关于这方面的内容，或者在MDN上阅读更多内容，你能澄清一下吗？你想要代码显示预加载gif还是预加载网页？我刚把“预加载gif”改为“加载gif”。我想在预加载页面时显示gif。

<link rel="prefetch" href="http://example-site/next_page_after_login.html" />