Question

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

点击登录按钮后，我想在页面上显示加载的gif 正在缓存/预加载并在完成后重定向到页面。

我很感激示例脚本代码。

Answer 1

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

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

您可以在David Walsh博客here上阅读更多相关信息，或在MDN上了解更多信息prefetch MDN

Answer 2

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

http://jsfiddle.net/umidbek_karimov/DQ2wn/

使用css类来操纵加载器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路由器，或更强大的Angular.JS

Answer 3

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

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

我通过在不可见的<iframe>中加载页面解决了这个问题，并且只有在<iframe>加载并通过jQuery进行了修改后才使<iframe>可见。我认为有很多种方法可以做到这一点，但我是通过他们的z-index“juggling”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() }); }); });元素来实现的。

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

http://jsfiddle.net/Leftium/L2HdV/（给spinner的Umidbek帽子提示！）：

{{1}}

Answer 4

看看这篇文章，值得尝试

http://www.peachpit.com/articles/article.aspx?p=1916948&seqNum=4

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

4 个答案: