0

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

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

有任何想法吗？

4

6 回答 6

3

showPageByHref() 答案部分正确。

但是，而不是

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

你需要

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

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

于 2010-10-19T02:00:20.920 回答
2

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

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

函数 showPageByHref(href, 选项) {
...
if (href != '#'){
    $('body').append('<div id="loadinginprogress">加载中...</div>');
    $.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；
}
于 2010-08-23T22:54:50.497 回答
1

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

于 2010-04-17T10:29:43.983 回答
1

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

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


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

此 jQuery 文档页面中提供了更多详细信息。

于 2012-02-25T00:59:20.790 回答
0

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

于 2010-11-15T10:51:53.690 回答
0

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

于 2010-08-24T09:19:38.637 回答