Как показать, что jQuery работает / ждет / загружается? - PullRequest
Новая
       14

Как показать, что jQuery работает / ждет / загружается?

4 голосов
/ 27 мая 2010

Как показать загрузочную картинку и / или сообщение пользователю? Если возможно, я хотел бы знать, как сделать его полноэкранным с серым фоном. Вроде как при просмотре большой картинки из некоторых галерей (извините, пример без ссылки).

В настоящее время я добавляю CSS-класс, который имеет изображение и другое форматирование, но по какой-то причине он не работает. Результаты поиска вставляются в div.

HTML 

<div id="searchresults"></div>

CSS 

div.loading {
  background-image: url('../img/loading.gif'); 
  background-position: center;
  width: 80px;
  height: 80px;
}

JS 

$(document).ready(function(){
  $('#searchform').submit(function(){
    $('#searchresults').addClass('loading');
    $.post('search.php', $('#'+this.id).serialize(),function(result){
      $('#searchresults').html(result);
    });
    $('#searchresults').removeClass('loading');
    return false;
  });
});

Ответы [ 2 ]

2 голосов
/ 27 мая 2010

Ваша проблема в том, что вы звоните removeClass('loading') сразу после того, как вы выполнили вызов ajax, а не после его завершения.

Вы можете сделать removeClass('loading') в обратном вызове ajax. $.post позволяет предоставить только success обратный вызов: 

jQuery.post( url, [ data ], [ success(data, textStatus, XMLHttpRequest) ], [ dataType ] )

И загрузочная картинка должна быть удалена в любом случае - успех или неудача, поэтому лучше использовать complete обратный вызов $.ajax(): 

$('#searchform').submit(function(){
  $('#searchresults').addClass('loading');

  $.ajax({
    type: 'POST',
    url: 'search.php',
    data:  $('#'+this.id).serialize(),
    success: function(result){
      $('#searchresults').html(result);
    },
    complete: function() {
      $('#searchresults').removeClass('loading');
    }
  });
  return false;
});

Подробнее о обратных вызовах см. В разделе «Функции обратного вызова» в $. Ajax () документы

0 голосов
/ 27 мая 2010

Попробуйте это: 

    $("#contentLoading").ajaxSend(function(r, s) {
        $(this).show();
        $("#ready").hide();
    });

    $("#contentLoading").ajaxStop(function(r, s) {
        $(this).hide();
        $("#ready").show();
    });

Это покажет #contentLoading, что является моим прогрессом gif, когда я запустлю ajax, и скрою его, когда ajax остановится.

...