Я использую 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 мс загрузится новая вкладка