JQTOUCH - 任何时候发生加载时，添加加载类？

Question

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

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

有什么想法吗？

Answer 1

showPageByHref() 答案部分正确。

但是，

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

您需要

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

Body 对于 jqtouch 来说太笼统了，需要特定于当前显示的 DIV 页面

Answer 2

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

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

function showPageByHref(href, options) {
...
if (href != '#'){
    $('body').append('<div id="loadinginprogress">Loading...</div>');
    $.ajax({
        url: href,
        data: settings.data,
        type: settings.method,
        success: function (data, textStatus) {
            $('#loadinginprogress').remove()
            var firstPage = insertPages(data, settings.animation);
            if (firstPage)
            {
                if (settings.method == 'GET' && jQTSettings.cacheGetRequests && settings.$referrer)
                {
                    settings.$referrer.attr('href', '#' + firstPage.attr('id'));
                }
                if (settings.callback) {
                    settings.callback(true);
                }
            }
        },
        error: function (data) {
            $('#loadinginprogress').remove()
            if (settings.$referrer) settings.$referrer.unselect();
            if (settings.callback) {
                settings.callback(false);
            }
        }
    });
}
...
}

用于加载 div 的 css 类似于：

#loadinginprogress {
    -webkit-border-radius: 10px;
    background-color: rgba(0,0,0,.5);
    color: white;
    font-size: 18px;
    font-weight: bold;
    height: 80px;
    left: 60px;
    line-height: 80px;
    margin: 0 auto;
    position: absolute;
    text-align: center;
    top: 120px;
    width: 200px;
    z-index: 5000;
}

Answer 3

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

Answer 4

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

我有一个解决方案可以提出，无需修补 jQTouch 所依赖的 jQtouch 代码。
它使用 jQuery ajax 功能。

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

更多详细信息请参见此 jQuery 文档页面。

Answer 5

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

Answer 6

我刚刚回答了达林·帕克的问题。只要检查一下它可能会对您有所帮助。