JQTOUCH - 任何时候加载，添加加载类？答案

【问题标题】：JQTOUCH - Anytime loading occurs, add a loading class?JQTOUCH - 任何时候加载，添加加载类？
【发布时间】：2011-02-07 17:37:00
【问题描述】：

我正在使用 JQTOUCH，在 JQTOUCH 中，有几个链接正在通过 AJAX 加载，然后滑入。问题是没有向用户提供加载指示。

我想要一种在加载 ajax 调用时添加带有 AJAX 微调器的 Loading 类的方法，并在加载完成时删除该类并显示页面。

有什么想法吗？

【问题讨论】：

标签： iphone web-applications jqtouch

【解决方案1】：

感谢您的不同帖子。他们帮了我很多。

我有一个解决方案可以在不修补 jQTouch 所依赖的 jQtouch 代码的情况下提出。它使用 jQuery ajax 功能。


$(document).ready(function() {
...
  $('#jqt').ajaxStart(function() {
    console.log("ajaxStart");
    ...
  }).ajaxSuccess(function() {
    console.log("ajaxSuccess");
    ... 
  }).ajaxError(function() {
    console.log("ajaxError");
    .... 
  });
....
});

更多详情请见this jQuery doc page。

【讨论】：

【解决方案2】：

我刚刚回复了 Darin Parker 的 question。看看它可能对你有帮助。

【讨论】：

【解决方案3】：

showPageByHref() 的答案部分正确。

但是，而不是

$('body').append('<div id="loadinginprogress">Loading...</div>');

你需要

$('.current').append('<div id="loadinginprogress">Loading...</div>');

body对于jqtouch来说太笼统了，需要具体到当前显示的DIV-page

【讨论】：

【解决方案4】：

您可以添加自定义事件处理程序，并在每次点击特定元素时触发 loading.gif。

【讨论】：

【解决方案5】：

jqtouch js 中的showPageByHref() 函数是一个好的开始。我将它添加到 ajax 调用中，因此当您单击已加载的链接等时，请稍候不会闪烁。

简而言之 - 在 ajax 调用之前添加加载 div（示例中的 id loadinginprogress）并删除稍后的“成功”或“错误”。 ajax 调用部分看起来像这样（缩短它）：

函数 showPageByHref(href, 选项) { ... if (href != '#'){ $('body').append('

加载中...

'); $.ajax({ 网址：href，数据：settings.data，类型：settings.method，成功：函数（数据，文本状态）{ $('#loadinginprogress').remove() var firstPage = insertPages(data, settings.animation); 如果（第一页） { if (settings.method == 'GET' && jQTSettings.cacheGetRequests && settings.$referrer) { settings.$referrer.attr('href', '#' + firstPage.attr('id')); } 如果（设置。回调）{ settings.callback(true); } } }, 错误：函数（数据）{ $('#loadinginprogress').remove() if (settings.$referrer) settings.$referrer.unselect(); 如果（设置。回调）{ settings.callback(false); } } }); } ... }

用于加载 div 的 css 类似于：

#loadinginprogress { -webkit-border-radius：10px；背景颜色：rgba(0,0,0,.5); 白颜色; 字体大小：18px；字体粗细：粗体；高度：80px；左：60px；行高：80px；边距：0 自动；位置：绝对；文本对齐：居中；顶部：120 像素；宽度：200px； z 指数：5000； }

【讨论】：

【解决方案6】：

如果您的链接是 li class="arrow" 元素，这是基本行为。你如何显示你的链接以及你希望加载微调器显示在哪里？

【讨论】：