rel="external" 时显示页面加载器答案

【问题标题】：Showing page Loader when rel="external"rel="external" 时显示页面加载器
【发布时间】：2014-06-18 16:26:58
【问题描述】：

我正在导航到 jQuery Mobile 应用程序中的外部 html 页面。该页面需要一段时间加载我想同时显示加载器但它不起作用..这是我尝试过的..

$(document).ajaxStart(function() {
        //  $.mobile.loading('show');
        $.mobile.loading( "show", {
                    text: 'Please Wait!',
                    textVisible: 'true',
                    theme: "b",
                    textonly: 'true',
                    html: ''
            });

        });

        $(document).ajaxStop(function() {
            $.mobile.loading('hide');
        });

我知道 rel="external" 禁用了 ajax，有什么办法可以显示这个加载程序打开外部链接..？

【问题讨论】：

这是不可能的，因为页面不是通过 Ajax 加载的，并且 DOM 被新页面的 DOM 替换。
@Omar : 有没有传统的方法可以通过纯 JS 来做到这一点 ..？我只需要显示一个 Please Wait 标签.. 就是这样...
在隐藏页面之前显示加载器的唯一方法是延迟显示下一页。
@Omar : 你能给我看一个演示吗，或者给我一个链接，里面有一些关于它的信息...

标签： jquery-mobile jquery-mobile-loader

【解决方案1】：

当您移动到禁用 Ajax 的 external 页面时，loader 不会显示，因为 DOM 已被擦除并替换为该 external 的内容em> 页。

在导航之前显示 loader 的唯一可能方法是延迟 setTimeout() 移动到该页面。

HTML

<a href="http://www.*****.com" rel="external" class="ui-btn external">External Page</a>

$(document).on("pagecreate", "#pageID", function () {
    $(".external").on("click", function (e) {
        e.preventDefault();
        var url = $(this).attr("href");
        $.mobile.loading("show", {
            text: "redirecting...",
            textVisible: true
        });
        setTimeout(function () {
            location.href = url;
        }, 2000); // 2secs delay
    });
});

Demo - Code

【讨论】：