Как дать пользователю прогресс бар

Question

я это site здесь

У меня есть AJAX запрос, который вызывает страницу PHP с помощью этой команды

var successCallback = function(responseText, textStatus, XMLHttpRequest) { 
// rebind your event handlers here 
    // blue item expand 
    $('.item-blue .btn-expand').click(function() { 

     var btn = $(this); 
     $(this).parent().prev().slideToggle(function() { 
      btn.toggleClass('btn-expand-h'); 
     }); 
     return false; 
    }); 
}; 

$("#main_content").load("/pre_config/function.php?type="+type+"piz&count=1", successCallback); 

Он работает хорошо, но это звонит РНР страницы, которая делает запрос базы данных, поэтому иногда это может быть медленным, и это время от времени немного отстает. Мне было интересно, если бы был чистый способ сделать индикатор выполнения, поэтому, когда пользователь нажимает на верхний раскрывающийся список, индикатор выполнения появляется, так что пользователь не получит отставание или хуже долгое время ожидания для узкого места db

Answer 1

Если вы У вас нет других запросов ajax на странице, вы можете использовать функцию ajaxStart() для определения глобального обработчика событий для всех событий ajax. Вы можете использовать его как это:

var main = $('#main_content'); 

main.ajaxStart(function(){ 
    main.empty().append("<img id="throbber" src='throbber.gif' alt='Loading. Please wait.' />"); 
}); 

Где throbber.gif что-то вроде этого, генерируется с этого сайта: http://www.ajaxload.info/

Или же вы можете также прикрепить эту строку обработчика click событий.