jQtouch 和 jquery 加载覆盖答案

【问题标题】：jQtouch and jquery loading overlayjQtouch 和 jquery 加载覆盖
【发布时间】：2009-11-11 23:00:11
【问题描述】：

我使用 jQtouch 创建了一个移动应用程序。我需要让我的用户知道在他们按下表单按钮后加载 ajax 调用的时间。所以我想加载一个蒙版和一个简单的加载gif。

我可以让它在应用程序的桌面版本上正常工作，但在带有 jQtouch 框架的移动设备上我不能。

我已经尝试过jquery-loadmask 和 jquery.loading 插件。

有人对 jQtouch 和创建加载通知有任何经验吗？

【问题讨论】：

标签： jquery ajax jqtouch

【解决方案1】：

不幸的是，该网站不允许我深入链接到相关部分，但您会在此页面的一半左右找到解决方案（只需 cntr+F 并搜索“进度指示器”）：

http://building-iphone-apps.labs.oreilly.com/ch03.html#ch03_id35817310

这不是 jQTouch 特有的，但您应该能够使用 jQTouch 的 init 选项将其绑定并预加载加载图形。

希望对您有所帮助。

【讨论】：

这里是锚定链接：ofps.oreilly.com/titles/9780596805784/…

【解决方案2】：

您可以使用 jQuery blockUI 插件 (http://jquery.malsup.com/block/)。我已经在一个项目中成功地使用了它，而且它真的很容易集成。它适用于 iPhone 和 Android。

【讨论】：

【解决方案3】：

这适用于使用 Zepto 的 jQTouch（尚未使用 jQuery 测试）。

HTML：

<div id="jqt">
    ...
    <div id="loading"></div>
</div>

CSS：

div#jqt #loading {
  background: rgba(0,0,0,0.5) url('../images/scanner/loading.gif') 50% 50% no-repeat;
  z-index: 999;
  position: fixed;
}

JS：

$(document).on('ajaxStart', function(){
    $('#loading').addClass('current');
});

$(document).on('ajaxStop', function(){
    $('#loading').removeClass('current');
});

【讨论】：