jQuery Mobile 加载消息

Posted 2023-03-31

【中文标题】jQuery Mobile 加载消息

【英文标题】：jQuery Mobile loading message

【发布时间】：2012-05-01 12:58:25

【问题描述】：

当我将 jQuery Mobile 链接到我的页面时，页面底部出现了某种加载消息，我无法摆脱它。我试过 $.mobile.pageLoading(true) 但没用。

我应该如何删除它？我没有在任何地方打印它。

【问题讨论】：

JQM 在加载 JQM 页面时将显示加载 gif。这可能就是您所看到的。我们可以查看您的代码吗，它将帮助我们确定您的页面是否为 JQM 正确设置。

我遇到了同样的问题，升级到 jQuery 1.90 后消息消失了，橙色框也消失了。

【参考方案1】：

1.4 加载器文档

1.4 文档建议与 Loader 小部件 进行交互。页面顶部描述了全局更改选项，但可以在逐个链接的基础上进行细微差别。这也可能有效：

$( document ).on( "mobileinit", function() 
    $.mobile.loader.prototype.options.disabled = true;
);

另外，根据http://demos.jquerymobile.com/1.4.5/loader/和http://api.jquerymobile.com/loader/，可以用下面的代码隐藏加载体验：

// As submitted by @Aras
$.mobile.loading( "hide" );
// (or presumably as submitted by @Pnct)
$.mobile.loading().hide();

选项 B - 禁用 AJAX 加载

禁用 AJAX 加载将有效地删除消息。

如果您不希望页面从后台加载中受益然后显示，您可以通过在任何锚点上指定data-ajax='false' 使其像“正常”一样加载 (@987654331 @) 标签，您不想看到加载消息。还有一个全局设置可用于使所有链接“正常”加载。

要全局禁用（请务必read this page 了解含义及其建议。new docs 可能没有警告）：

$.mobile.ajaxEnabled=false;

选项 C - 隐藏它

如果您想使用 1.4 Load Page 方法加载外部页面，它有一个可用于 showLoadMsg 的选项，您可以简单地将其设置为 false。

仅用于删除消息的全局选项（在早期版本中可用——至少 1.0、1.1 和 1.2——阅读它here）是：

$.mobile.loadingMessage = false;

1.2 和之前的文档说，如果您将其设置为 false，则不会显示加载消息。

【讨论】：

谢谢@MikkoP；很高兴听到

$.mobile.loadingMessage = false;工作！非常感谢！

【参考方案2】：

我正在使用最新版本的 JQuery Mobile（当前为 1.4）并遇到了这个问题。这里没有一个解决方案对我有用，我认为其中许多已被弃用。这对我有用：

$.mobile.loading().hide();

$.mobile.loading() 会给你元素，你可以hide 它或者做任何你想做的事情。希望这对某人有所帮助。

【讨论】：

这也是唯一对我有用的解决方案。

【参考方案3】：

我遇到了同样的问题，一个烦人的加载消息和一个橙色框架。这是由于没有添加对 jquery 样式表的引用。

在标题中添加引用解决了它。

<link rel="stylesheet" type="text/css" href="https://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css">

【讨论】：

这对我有用，看起来是正确的做法。谢谢！

这对我也有用！我认为这是避免加载消息的正确方法。

【参考方案4】：

如果您使用的是 jquerymobile 的最新更新 (1.2.0) 试试这个

$.mobile.loading( 'show',  theme: "b", text: "", textonly: false);

因为它对我有用。

【讨论】：

你是怎么知道的？，具体链接？

【参考方案5】：

Pnct 的答案更接近于 JQM 1.2.0 的正确性。但是，根据提供的 API 文档，以下内容会更正确。

$.mobile.loading('hide');

还要确保您的 html 文件中至少有为 JQM 结构定义的样式表。否则看起来函数什么都不做。

【参考方案6】：

就我而言 (jQueryMobile 1.4.5)，我只需要将它添加到我的 CSS 中，这样我就可以避免导入整个 jQueryMobile CSS 文件（我不需要它）。

.ui-loader 
  display: none !important;

【讨论】：

小心这个；您可以使用样式将其隐藏，但 Google 仍会在您的页面上选择多个 h1 元素。

【参考方案7】：

默认情况下，该消息应该是隐藏的。您可能没有包含官方的 jQuery Mobile 样式表。

您不应通过代码手动隐藏或禁用加载消息。

正确的方法应该是为 jQuery Mobile 1.4.5 包含以下样式表：

<link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile.structure-1.4.5.css">

这将解决各种问题，包括 Chrome 中选定元素周围的蓝色轮廓和 android 中的橙色轮廓。

如果这篇文章过时了，所有版本的样式表都可以在这里找到： https://jquerymobile.com/download/

【参考方案8】：

添加这个

<script>
$(document).ready(function()
  $(".ui-loader").hide();
);
</script>

【参考方案9】：

你也可以使用smth。像这样删除消息：

$('.ui-loader h1').remove();

【参考方案10】：

在我的情况下，我加载了错误的 css 文件（jquery css 而不是 jquery mobile css）

错误：

<link href="../CSS/jquery-ui-1.11.4.custom/jquery-ui.min.css" rel="stylesheet" />

对：

<link href="../CSS/jquery.mobile-1.4.5.min.css" rel="stylesheet" />

【参考方案11】：

尝试使用$.mobile.hidePageLoadingMsg()