Question

我正在使用mootools。

有一个带有ajax标签的页面。单击时，将使用mootools Request.HTML命令加载新选项卡。

因为在后台会有一些非常耗时的SQL查询，所以我会显示一个旋转图标，直到页面加载为止（参见代码）。

122       $('detailContent').set('html', '<img src="common/img/ajax-loader-big.gif" alt="Loading content..." class="tabSwitchSpinner" />');
123       new Request.HTML({
124         url: url,
125         method: 'get',
126         evalScripts: true,
127         update: $('detailContent')
128       }).send();
129       $('detailNavi').getElement('.active').set('class', '');
130       this.getParent('li').set('class', 'active');

这适用于需要一段时间才能加载的页面，但如果我加载的页面加载时间只需要半秒钟，则旋转图标会快速闪烁并分散用户的注意力。

如何更改此代码，以便只有在请求时间超过半秒后才会显示图标（第122行）？

编辑：为了澄清问题，我需要一个如下行为：

标签需要200毫秒才能加载 - 直接切换标签
选项卡需要1600毫秒才能加载 - 在500毫秒后，当前选项卡将更改为旋转的“ajax加载”图标，并在另外1100毫秒后加载新选项卡

Answer 1

安德鲁说，只有我使用onRequest作为触发事件：

http://www.jsfiddle.net/dimitar/KGNvu/

var timer;

new Request.HTML({
    url: '/ajax_html_echo/',
    data: {
        'html': "request complete"
    },
    method: 'post',
    update: 'target_div',
    onRequest: function() {
        timer = (function() {
            document.id("target_div").set("html", "<img src='http://straval.com/img/ajax-spinner-large.gif' />");
        }).delay(500);
    },
    onSuccess: function() {
        $clear(timer);

    },
    onComplete: function() {
        $clear(timer);
    }
}).send();

jsfiddle是一个很好的例子，因为它会在所有测试请求上人为地增加1到5秒的延迟来模拟网络延迟。

Mootools：ajax请求时延迟旋转图标

1 个答案: