如何在重定向到外部页面之前使用jQuery预加载（缓存）它？

Question

我正在制作一个PhoneGap应用程序。我有一个带有登录按钮的index.html页面，该按钮将重定向到网站应用程序。

当单击登录按钮时，我希望显示一个加载gif，同时页面正在被缓存/预加载，并在完成后重定向到该页面。

我希望能提供一个示例脚本代码。

- h3n

---

你能澄清一下吗？你想要代码显示预加载动画还是预加载网页的代码？ - Veera

我刚把“预加载gif”改成了“加载gif”。我想在预加载页面时显示这个gif。 - h3n

Answer 1

我甚至不确定你是否需要使用jQuery或JavaScript，除非你想动态地处理许多类似的情况。你可以研究HTML5 prefetch来预加载并缓存登录后的下一页。因此，在文档的头部添加如下内容：

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

您可以在David Walsh博客的这里了解更多信息，或者在MDN的预取MDN页面上了解更多。

- Ady Ngom

Answer 2

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

使用CSS类来控制加载器div的可见性并在页面之间切换。 http://jsfiddle.net/umidbek_karimov/DQ2wn/

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路由器，或者更强大的Angular.JS

- Umidbek

Answer 3

我曾经使用<iframe>元素完成了类似的任务。我的 PhoneGap 应用程序需要加载本地页面，并可能通过 jQuery 进行修改。使用普通的重定向（通过 window.location）会有两个问题造成的加载过程中的痕迹：

1. 图片在加载时出现
2. 在 jQuery 修改之前的页面状态会瞬间闪烁。

我通过在不可见的 <iframe> 中加载页面，并仅在其加载完成并通过 jQuery 进行修改后使 <iframe> 可见来解决了这个问题。我想有各种方法可以做到这一点，但我是通过调整它们的 z-index 来完成的。

我创建了一个带有注释的 fiddle，它稍微简单一些，并添加了一个加载旋转器：

http://jsfiddle.net/Leftium/L2HdV/（感谢 Umidbek 提供的 spinner！）

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

    // Attach behavior to Login button.
    $('.login').on('click', function () {
        $app.addClass('loading');

        // Create an <iframe>.
        $iframe = $('<iframe>');

        // Set url of <iframe> to desired redirect URL.
        // Note: the URL must be in the same domain,
        // or set special HTTP headers to allow rendering inside an <iframe>.
        $iframe.attr({src: 'http://doc.jsfiddle.net/'});

        // Add <iframe> we just created to DOM.
        $iframe.appendTo($('body'));

        // When <iframe> has been loaded, remove <div> containing login button
        // and loading spinner to reveal <iframe>.
        $iframe.load(function() {
            $('.app').remove()
        });
    });
});

- Leftium