jQuery Mobile加载消息

Question

当我将jQuery Mobile链接到我的页面时，页面底部出现了某种加载消息，但是我无法摆脱它。我尝试了$.mobile.pageLoading(true)，但它没有起作用。我应该如何移除它？我没有在任何地方打印它。

- MikkoP

---

JQM在加载JQM页面时会显示一个加载gif。这可能是您所看到的。我们能否看到您的代码，这将帮助我们确定您是否已正确设置JQM页面。 - Lowkase

我也遇到了同样的问题，在升级到jQuery 1.90版本后，这个消息消失了，橙色的框架也不见了。 - ᴍᴀᴛᴛ ʙᴀᴋᴇʀ

Answer 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加载将有效地移除消息。

如果您不希望页面从后台加载，然后显示，您可以通过在任何锚点（<a...>）标记上指定data-ajax='false'来使其像“正常”一样加载。 还有一个全局设置，您可以使用它来使所有链接都以“正常”方式加载。

要全局禁用（务必阅读此页面以了解影响和建议。 新文档可能没有警告）：

$.mobile.ajaxEnabled=false;

选项C - 只是隐藏它

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

全局选项（在早期版本中可用 - 至少在1.0、1.1和1.2中 - 在这里了解有关其的更多信息）仅删除消息：

$.mobile.loadingMessage = false;

1.2及之前版本的文档表示，如果将其设置为false，则不会显示加载消息。

- veeTrain

---

$.mobile.loadingMessage = false; 已经生效了！非常感谢！ - Santiago Baigorria

Answer 2

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

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

$.mobile.loading()将为您提供元素，您可以hide它或执行任何其他操作。希望这能帮助到某些人。

- Aras

---

这也是唯一对我有效的解决方案。 - wadie

Answer 3

我遇到了同样的问题，即烦人的加载消息和橙色的框。这是由于未添加对jquery样式表的引用所致。

在页头中添加引用即可解决问题。

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

- Dani

---

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

这对我也管用！我认为这是避免加载消息的正确方式。 - JavierFuentes

Answer 4

如果您正在使用最新版本（1.2.0）的jquerymobile，请尝试以下操作：

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

因为它对我有用。

- Pnctovski

---

你是怎么得到的？具体链接是什么？ - Amir Naghizadeh

Answer 5

在我的情况下（jQueryMobile 1.4.5），我只需要添加这个CSS样式，就可以避免导入整个jQueryMobile CSS文件（我不需要它）。请参考以下代码：

.ui-loader {
  display: none !important;
}

- sonxurxo

---

小心处理这个问题；你可以用样式隐藏它，但是 Google 仍然会在你的页面上检测到多个 h1 元素。 - user1017882

Answer 6

Pnct的答案对于JQM 1.2.0更接近正确。然而，根据提供的API文档，以下内容更加正确。

$.mobile.loading('hide');

此外，请确保在HTML文件中至少定义了JQM结构的样式表。否则，它看起来就像函数什么都没做一样。

- Ryan Skoblenick

Answer 7

添加这个

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

- antonio

Answer 8

默认情况下，该消息应该是隐藏的。很可能是您没有包含官方的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/

- Kelvin

Answer 9

你也可以使用类似的方法来删除该消息：

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

- montie

Answer 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" />

- Zeni