Mootools: задержанный вращающийся значок во время запроса ajax - PullRequest
0 голосов
/ 02 сентября 2010

Я использую 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), только если запрос занимает больше половины секунды?


Редактировать: Чтобы прояснить проблему, мне нужно следующее поведение:

  • Tab требует 200 мс для загрузки - Tab переключается напрямую
  • Для загрузки вкладки требуется 1600 мс - через 500 мс текущая вкладка изменится на вращающуюся иконку «ajax loading», а еще через 1100 мс загрузится новая вкладка

1 Ответ

2 голосов
/ 03 сентября 2010

что сказал Андрей, только я бы использовал 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 секунд для всех тестовых запросов для имитации задержки в сети.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...