如何在重定向到jquery之前在jquery中预加载(缓存)外部页面？

Question

我正在做一个phonegap应用程序.我有一个index.html页面,其中包含一个重定向到网站应用程序的登录按钮.

单击登录按钮时,我希望在页面缓存/预加载时显示加载gif,并在完成后重定向到页面.

我很感激示例脚本代码.

Answer 1

我甚至不确定你需要使用任何jQuery或Javascript,除非你想动态处理这样的许多情况.您可以在登录后查看HTML5预取以预加载和缓存下一页.所以在你的文档的头部添加:

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

你可以阅读更多有关这对大卫·沃尔什博客在这里,或阅读更多的MDN 预取MDN

Answer 2

我使用元素完成了类似的任务<iframe>。我的phonegap应用程序需要加载（本地）页面，可能通过jQuery修改它们。使用普通重定向（通过window.location）导致加载工件有两个原因：

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

我通过以不可见的方式加载页面，并仅在加载页面并通过 jQuery 进行修改后才<iframe>使其可见，从而解决了这个问题。<iframe>我认为有多种方法可以做到这一点，但我是通过通过元素“杂耍”<iframe>元素来做到这一点的z-index。

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

http://jsfiddle.net/Leftium/L2HdV/ （向 Umidbek 的旋转器致敬！）：

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()
        });
    });
});