如何在重定向到jquery之前预加载（缓存）外部页面？ [英] How to pre-load (cache) an external page in jquery before redirecting to it?

问题描述

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

I am doing a phonegap app. I have an index.html page with a sign-in button that redirects to the website app.

点击登录按钮后，我想有一个加载gif显示页面
被缓存/预加载和重定向到页面，当它完成后。

When sign-in button was clicked, I wanted to have a loading gif to show while the page is being cached/pre-loaded and redirect to the page when its done.

我会感谢一个示例脚本代码

I would appreciate a sample script code.

推荐答案

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

I accomplished a similar task using <iframe> elements. My phonegap app needed to load (local) pages, possibly modifying them via jQuery. Using plain redirects (via window.location) caused loading artifacts for two reasons:

1. 
   

> 我通过在不可见的< iframe> 中加载页面，并使< iframe> code>只有在它通过jQuery加载和修改后才可见。我认为有很多方法可以做到这一点，但我通过juggling< iframe> ; c>

I solved this problem by loading the page in a non-visible <iframe>, and making the <iframe> visible only after it had loaded and modifications had been made via jQuery. I supposed there are various ways to do this, but I did it by "juggling" <iframe> elements via their z-index.

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

I have created an annotated fiddle that is slightly simpler and adds a loading spinner:

http： //jsfiddle.net/Leftium/L2HdV/ （针对微调框的帽子提示：Umidbek）：

http://jsfiddle.net/Leftium/L2HdV/ (Hat tip to Umidbek for the 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()
        });
    });
});

这篇关于如何在重定向到jquery之前预加载（缓存）外部页面？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！