当rel =“external”时显示页面加载器

时间:2014-06-18 06:07:40

标签: jquery-mobile jquery-mobile-loader

我正在浏览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 ="外部"禁用ajax,有没有办法可以显示这个加载器打开外部链接..?

1 个答案:

答案 0 :(得分:1)

当您在禁用Ajax的情况下移动到外部页面时, loader 不会显示,因为DOM已被擦除并被外部的内容替换页面。

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

HTML

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

JS

$(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